Question

我正在使用bootstrap的下拉功能，我在容器中有这个下拉列表，但在外面我有包装器，它对同一事件（onclick）做出反应，所以我做

e.stopPropagation();

因为当我点击下拉按钮时，我不想对包装器中的事件作出反应。不幸的是，此代码也会停止我的下拉事件。是否可以避免此行为并仅显示下拉列表，而不显示警报？ https://jsfiddle.net/hms5265s/

Answer 1

这是我的解决方案。

document.querySelector('.container').addEventListener('click', (e) => {
    if($(e.target).is("#dropdown")){
    alert('work');
  }
  else{
    e.stopPropagation();}
});

Answer 2

如果您希望在包装器的click事件上调用警报，而不是在下拉列表中单击事件，则可以尝试这样的事情

document.querySelector('#wrapper').addEventListener('click', (e) => {
    var source = event.target || event.srcElement;
console.log(source.id);
if (source.id !== 'someId') {
// do some stuff
    alert("I don't want this alert");
}
// you can stop the even propagation here if you want to.
});

这是JSFiddle

如果您也不想为下拉列表分配ID，您还可以检查课程。

Answer 3

这是我的解决方案

    Element.prototype.hasClass = function(className){
        tClassName = this.className;
        return tClassName.match(".*[ ]?"+className+"[ ]?.*") ? true : false;
};

document.querySelector('#wrapper').addEventListener('click', (e) => {
    console.log('clicked' + e.target.hasClass('dropdown-toggle'));
        if(e.target.hasClass('dropdown-toggle')) return

    alert("I don't want this alert");
});

document.querySelector('.dropdown-menu').addEventListener('click', (e) => {
    e.stopPropagation();
});

https://jsfiddle.net/hms5265s/6/

更新解决方案：

Element.prototype.hasClass = function(className){
        tClassName = this.className;
        return tClassName.match(".*[ ]?"+className+"[ ]?.*") ? true : false;
};

document.querySelector('#wrapper').addEventListener('click', (e) => {
        if(e.target.hasClass('dropdown-toggle')) return
    alert("I don't want this alert");
});

document.querySelector('.container').addEventListener('click', (e) => {
if(! e.target.hasClass('dropdown-toggle')){
    e.stopPropagation();
}
});

https://jsfiddle.net/hms5265s/12/

bootstrap下拉列表无法按预期工作

3 个答案: