Question

我有这样的HTML结构：

<table>
    <tr onclick="alert ('parent event')">
        <td>
             <input type="button" name="click me" value="I'm a button" id="click me" />
        </td>
    </tr>
</table>

现在我在tr上绑定了一个点击事件，现在，如果我点击该按钮，则tr上的点击事件也会被触发。

我怎样才能阻止这种情况发生？

Answer 1

将输入ID更改为click-me（不含空格），然后将其放在脚本标记之间：

window.onload = function() {
    document.getElementById('click-me').onclick = function(e) {
        e.stopPropagation();
        return false;
    }
}

或者您可以简单地将此代码放在onclick属性中：

<input type="button" onclick="event.stopPropagation();" ...

http://jsfiddle.net/qwk38/

Answer 2

你可以像下面这样解决;

HTML：

<table>
    <tr onclick="trAlert()" bgcolor="#cccccc" width="300" height="300">
        <td>
             <input type="button" onclick="btnAlert()" name="click me" value="I'm a button" id="click me" />
        </td>
    </tr>
</table>

JS

function trAlert()
{
    alert('tr');
}

function btnAlert()
{
    event.stopPropagation();
    alert('btn');   
}

在此处查看演示---＆gt; http://jsfiddle.net/Junkie/kZ6J6/

Answer 3

在冒泡中，事件首先被捕获并由最内层处理元素，然后传播到外部元素。

你应该阻止事件获得bubbled，

<table>
    <tr onclick="alert('parent click')">
        <td>
            <input onclick="event.stopPropagation();" type="button" name="click me" value="I'm a button" id="click me" />
        </td>
    </tr>
</table>

<强> Fiddle

Answer 4

为input添加一个onclick处理程序，回调函数包含event.stopPropagation()

function(event) {
  event.stopPropagation();
}

儿童点击事件影响父事件

4 个答案: