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

我有一个

div

，当我单击某个输入选择时，它会向下滑动（打开）。在这个

div

中，我有一些其他的输入选择，我的目标是在单击页面其余部分时向上滑动

div

我的问题是： 当我在输入选项中选择某个项目时，

div

会向上滑动，我不希望发生这种情况

• 是否只有当我在

  div外单击时，才可以向上滑动
  div

• 为什么div中的select也会向上滑动

这是我的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);
  }
});

当我在输入框中选择某个项目时，div向上滑动 是的，我不想发生这种事

是否只有当我在div外部单击时，才可以向上滑动div？ 为什么div中的select也会向上滑动

在子元素上使用，以防止它们触发幻灯片事件

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

下面是一个简单的基本示例

jQuery:

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

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

<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>

HTML:

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

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

<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>

点击这里会触发它！
这将不再触发点击事件！
点击这里也会触发它！
只有单击外部div才能将我向上滑动！

您可以使用您的

容器

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);
            }
            }
        });

---

我建议绑定

mousedown

而不是

mouseup

。浏览器之间的行为不一致，这可能与您的问题有关

您还应该添加一些逻辑来检查单击的元素不是

div

本身，仅在

输入

外部单击，但仍在

div

内部将导致当前发生

滑动

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

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

如果是特定的项目导致了问题，也许是这样的

单击时，只要单击的项目在列表中为“非”，就告诉它滑动您的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);
  }
});