单击其中的项目时，Div向上滑动答案

【问题标题】：Div slide up when click in items inside it单击其中的项目时，Div向上滑动
【发布时间】：2013-05-15 12:59:18
【问题描述】：

我有一个div，当我单击某个输入选择时，它会向下滑动（打开）。在这个div 中，我有一些其他输入选择，我的目标是当我点击页面的其余部分时向上滑动div。

我的问题：

div 在我选择其中的输入选择中的某些项目时向上滑动，我不希望这种情况发生。

只有当我在 div 外部单击时，有什么方法可以向上滑动它吗？
为什么 div 内的选择也会让它向上滑动？

这是我向上滑动 div 的 javascript：

$(document).mouseup(function (e) {
  var container = $('.myDiv');
  if (container.has(e.target).length === 0) {
    $(container).removeClass('close');
    $(container).addClass('open');
    $(container).next().slideUp(200);
  }
});

【问题讨论】：

标签： javascript jquery html document slideup

【解决方案1】：

当我在输入选择里面选择某些项目时，div 向上滑动它，我不希望这种情况发生。

只有当我在外部单击时，有什么方法可以向上滑动 div 吗？为什么 div 内的选择也会让它向上滑动？

在子元素上使用event.stopPropagation() 以防止它们触发幻灯片事件。

event.stopPropagation - 防止事件冒泡 DOM 树，防止任何父处理程序收到事件通知。

这是一个简单的jsFiddle 和下面的基本示例。

jQuery：

$('div').click(function(){
  $('#slideMeUp').slideUp();
});

$('select').click(function(e){
  e.stopPropagation();
});

HTML：

<div>Clicking here will trigger it! 
    <select>
        <option>This won't trigger the click event anymore!</option>
    </select>
    Clicking here will also trigger it!
</div>

<div id="slideMeUp">Only clicking the outer div will slide me up!</div>

【讨论】：

【解决方案2】：

您可以使用您的container id 检查您的e.target.id

        $(document).mouseup(function (e) {
            var container = $('.myDiv');
            if(e.target.id==$(this).attr('id'))
            {
            if (container.has(e.target).length === 0) {
                $(container).removeClass('close');
                $(container).addClass('open');
                $(container).next().slideUp(200);
            }
            }
        });

【讨论】：

【解决方案3】：

如果是特定项目导致问题，可能是这样的？

点击时告诉它滑动你的 div，只要点击的项目不在列表中。

('body').click(function(event) {
  if (!$(event.target).is('#id_of_item .class_to_ignore')) {
    var container = $('.myDiv');
    $(container).removeClass('close');
    $(container).addClass('open');
    $(container).next().slideUp(200);
  }
});

【讨论】：

【解决方案4】：

我建议绑定mousedown 而不是mouseup。浏览器之间的行为不一致，这可能与您的问题有关。

您还应该添加一些逻辑来检查单击的元素不是div 本身，单击input 之外，但仍在div 内部当前会导致slideUp 发生。

if (!container.has(e.target).length && !container.is(e.target)) {
  ...
}

除此之外，它应该可以正常工作。

Have a fiddle

【讨论】：