Question

我的页面上有一个非常基本的Bootstrap按钮。我有一个事件监听器侦听此按钮的点击。我有一个图像标记作为按钮的内容。当用户单击该按钮时，事件侦听器将根据需要触发。但是，如果按钮单击落在按钮内的图像上，则图像会截取单击，并且按钮单击事件侦听器不会触发。如何让按钮检测本身及其内容（例如图像标签）的点击？

<button type="button" class="btn btn-custom" id="navLogoButtonLeft">
    <!-- dev tools indicate clicks land on this <img> and never make it to the <button> -->
    <img class="icon" src="img/icon.png">
</button>

注意，这是一个Twitter Bootstrap按钮，但我不确定这个问题是否有任何影响。

这是JS，请求。

var navLogoButtonLeft;

function initNav() {
    navLogoButtonLeft = document.getElementById('navLogoButtonLeft');

    // note, I've tried both 'true' and 'false' here
    navLogoButtonLeft.addEventListener('click', handleClick, true);
}

// this method does fire, but clickEvent is the <img>, not the <button>
function handleClick(clickEvent) {
    if(clickEvent.target == navLogoButtonLeft) {
        // this line cannot be reached
        window.location = './';
        return;
    }
}

window.addEventListener('load', initNav, false);

Answer 1

您的开发工具是正确的。单击按钮中的图像时，事件目标实际上是图像。然而，click事件应该冒泡并最终使按钮的事件监听器触发。

所以，如果您的HTML是正确的（例如//注释会破坏它），并且您正确添加了事件监听器，如

var btn = document.querySelector('#navLogoButtonRight');

btn.addEventListener('click', function (ev) {
 ev.stopPropagation();
 console.log('Event listener for element ' + ev.currentTarget.nodeName + '#' + ev.currentTarget.id + ' fired.');
 console.log('Clicked on ' + ev.target.nodeName);
});

事件监听器应在单击按钮及其任何子元素时触发。处理程序中的ev.stopPropagation();会阻止事件进一步冒泡。请在此处查看工作示例：https://jsfiddle.net/quj56hq5/

如果您必须设置pointer-events: none;才能使用此功能，那么您的代码或某些Twitter Bootstrap JS肯定会出现问题。

<强>更新

在问题的作者添加JS之后，问题的真正原因显示出来了。这是行

if(clickEvent.targe‌t == navLogoButtonLeft) {

可以在单击图像时保持处理程序的代码不被执行，因为.target始终是单击的元素，而.currentTarget始终是侦听器最初附加到的元素。

Answer 2

您可以将相同的事件侦听器添加到图像标记以获得所需的效果。

虽然您也可以进入更高技术水平并添加一个在CSS中设置pointer-events: none;的类，并将该类添加到img标记的末尾

Answer 3

尝试执行反向（并使用气泡效果）然后尝试将listner应用于img（在我的示例中，我只是更改与侦听器关联的id的位置）

<button type="button" class="btn btn-custom" >
  // dev tools indicate clicks land on this <img> and never make
  //   it to the <button>
   <img class="icon" src="img/icon.png"  id="navLogoButtonRight"   >
</button>

按钮内容拦截的按钮点击事件

3 个答案: