Question

我想检测按钮上的单击，但是事件目标是图像而不是按钮。因此，当某个特定元素的一个子元素被点击时，如何检测到该元素的点击。

$(document).on('click', function(event){
    var $this=$('#menu'); 
    var $that=$('#menu-body');
    if($this.is(event.target)) { // this line does not work correctly
        if($that.is(':hidden')){
            $that.show();
        } else {
            $that.hide();
        }
    } else {
        if(!$(event.target).is($that)){
            $that.hide();
        }
    }
});

当按钮没有子按钮时此代码有效，但是当图像位于其中时无效：

<button id="menu"><img src="pics/menu.png"></button>

Answer 1

这就是我使用普通香草Javascript所要做的。

仅检查元素是否具有id="menu"，或closest('#menu')查找元素。如果为真，则单击#menu或其后代。

document.addEventListener('click', function(event) {
  if (event.target.id === 'menu' || event.target.closest('#menu')) {
    console.log('clicked #menu or descendant');
  }
})

<button id="menu"><img src="pics/menu.png"></button>

单击事件绑定到文档时如何检查元素是否被单击

1 个答案: