引导程序下拉菜单无法正常工作

Question

I'm using dropdown functionality of bootstrap and I have this dropdown in container, but in outside I have wrapper, which is reacting on the same event (onclick), so I do

e.stopPropagation();

because I don't want to react on event in wrapper, when I'm clicking dropdown button. Unfortunately, this code also stops my dropdown event. Is it possible to avoid this behaviour and display only dropdown list, without alert? https://jsfiddle.net/hms5265s/

Answer 1

Here is my solution.

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

Answer 2

If you want your alert to be called on the click event of the wrapper but not the click event of the dropdown iteself you can try something like this

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

Here is a JSFiddle

If you also don't want to assign an Id for your dropdown you can also check for a class.

Answer 3

here is my solution

    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/

updated solution:

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/