Question

我有以下HTML代码：

<div class="panel"> <h4>Title <button>Show something</button> </h4>  </div>

如果有人点击了类面板而不是按钮，如何更改JS代码来执行事件？

试图这样做：

$( ".panel:not(button)" ).on( "click",

但它不起作用。提前谢谢，

Answer 1

您有几个选择：

在click上隐藏button并停止传播：

$(".panel").on("click", function() {
    // Do the thing
});
$(".panel button").on("click", function(e) {
    e.stopPropagation();
});

检查click是否通过途中的按钮：

$(".panel").on("click", function(e) {
    var elm = e.target;
    while (elm !== this) {
       if (elm.tagName === "BUTTON") {
           return;
       }
    }
    // Do the thing
});

实际上，由于它是button，＃2的处理程序可以更简单：

$(".panel").on("click", function(e) {
    if (!$(e.target).closest("button").length) {
        // Do the thing
    }
});

...因为我们知道.panel不在button内（因为这意味着.panel的{{1}}位于另一个按钮内，无效）。

Answer 2

在panel类上添加一个事件监听器。

$('.panel').on('click', function() {
    console.log('clicked');
});

此外，您必须在按钮上添加一个事件监听器，并告诉它不要为其父母触发任何事件。

$('button').on('click', function(e) {
    e.stopPropagation();
});

Answer 3

检查要点击的目标。

＆＃13;

$( ".panel" ).on( "click",function(e){
  if($(e.target).is('button')){
            e.preventDefault();
            return;
        }
    alert('clicked');

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel"><h4>Title <button class='clsButton'>Show something</button> </h4>  </div>

＆＃13;

如果不是按钮

3 个答案: