Question

我有一个<button>包含在<div>内。我希望能够点击按钮而不会实际点击<div>。 <button>需要保留在<div>内。

下面是代码：

<div onclick='console.log("Div was clicked.")'>
    This is the Div
    <button onclick='console.log("Button was clicked.")'>Button</button>
</div>

当我点击<div>控制台日志＆＃34; Div被点击时。＆＃34;。当我点击<button>控制台日志＆＃34;点击按钮时。＆＃34;点击了＆＃34; Div。＆＃34;。

如何在<button>点击注册时点击<div>？任何替代方案/解决方法？

谢谢你们。

Answer 1

在按钮event.stopPropagation()处理程序中添加onclick。

<div onclick='console.log("Div was clicked.")'>
    This is the Div
    <button onclick='event.stopPropagation(); console.log("Button was clicked.")'>Button</button>
</div>

Answer 2

您还可以查看target.id。这是使用jQuery的一个小例子：

<强> HTML：

<div id="parent">
    This is the Div
    <button onclick='console.log("Button was clicked.")'>Button</button>
</div>

<强> jQuery

$('#parent').click(function(e)
{
    if (e.target.id == "parent") {console.log("Div was clicked.")}
});

小提琴： http://jsfiddle.net/mrnLLvac/

Answer 3

添加以下JavaScript函数：

function CancelMouseEvent (Event)
{
   Event = Event ? Event : window.Event;
   if (Event.stopPropagation) { Event.stopPropagation(); }
   if (Event.preventDefault) { Event.preventDefault(); }
   Event.cancelBubble = true;
   Event.cancel = true;
   Event.returnValue = false;
   return false;
}

现在在HTML中使用它：

<button onclick='console.log("Button was clicked."); CancelMouseEvent(event);'>Button</button>

Answer 4

通常，建议不要使用旧的事件绑定方法。建议使用addEventListener，这样JS就会保留在JS中，而HTML只是HTML。

以下简单示例：

<div id="wrap">
    This is the Div
    <button id="button">Button</button>
</div>

<script>
    var wrap = document.getElementById('wrap');

    wrap.addEventListener('click', handleClick, true);

    function handleClick(e) {
        e.stopPropagation;

        if (e.target.id === 'button') {
            // do stuff because button was clicked
            console.log('button was clicked');
        }
    }

</script>

编辑：为什么你的代码不起作用你的代码没有用，因为事件和＃34;冒泡＆＃34;在你的情况下，即使你点击了＆＃34;按钮＆＃34;，也会触发以下事件：

按钮（目标）===（冒泡到其父级）=== DIV（其事件也被触发）。

单击节点而不单击父节点

4 个答案: