Question

假设我有一个带onclick事件的元素，并且其中包含另一个元素，如何禁用子元素的onclick？

例：
<h3 onclick="do something"><input type="checkbox" name="child" /> text</h3>

选中该复选框后，不应触发onclick事件。

感谢。

Answer 1

Javascript事件是自下而上传播的，即如果你点击一个按钮，所有后代都会以有序的方式接收onclick事件，除非其中一个通过stopPropagation拦截它（或者返回true，意味着我处理了这个）< / p>

示例：

<h3 onclick="do something"><input type="checkbox" name="child" onclick="return false;" /> text</h3>

你也可以将父亲的onclick绑定到一个函数：

function onlick_handler(e)
{
   e.stopPropagation(); //this event would propagate to parents of this object which are clicked as well
   // the rest here
}

Answer 2

您的处理程序（“do something” - h3标记的一部分）可以检查原始元素的tagName：

var origin = event.srcElement || event.target;
if (origin.tagName && origin.tagName.match(/h3/i)){
  // do things
} else {return true;}

现在，对于复选框，单击处理程序已被触发，但不会发生任何事情。或者，您可以为h3-tag提供唯一ID，并检查所单击元素的ID。

Answer 3

http://www.quirksmode.org/js/events_order.html

见stopPropagation（）

Answer 4

我可以提出this anwser我提供的类似问题吗？

上面我复制了原来的答案：

我的第一个问题问题非常类似。但改为＆lt; div＆gt;还有一个复选框，它是一张桌子。查看我的非工作代码：

<table>
  <tr onClick="alert('I expect this alert when Cell_1 or Cell_2 are clicked but not Cell_3')">
    <td>Cell_1</td>
    <td>Cell_2</td>
    <td onClick="alert('I expect this alert only when Cell_3 is clicked')">Cell_3</td>
  </tr>
<table>

单击Cell_1或Cell_2，我的代码按预期工作，但是当没有单击Cell_3时，因为它显示了2个警报。

第一个是：

＆＃34;我希望只有在点击Cell_3时才会出现此警报＆＃34;

，第二个是：

我希望在单击Cell_1或Cell_2但不是Cell_3 时发出此警报。

Google-ing我如何管理，我在this briliant上发现Quirksmode帖子。

嗯，简单地说，我可以这样解决这个难题：

<table>
  <tr onClick="alert('I expect this alert when Cell_1 or Cell_2 are clicked but not Cell_3')">
    <td>Cell_1</td>
    <td>Cell_2</td>
    <td onClick="Cell_3Alert(event)">Cell_3</td>
  </tr>
<table>

和Javascript：

function Cell_3Alert(e) {
  alert('I expect this alert only when Cell_3 is clicked');

  if (!e) var e = window.event; 
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
}

我已经过测试，它适用于FireFox 3.6 +，IE6 +和Chrome。

希望它有帮助！

Answer 5

如果选中该复选框，则可以使用onClick作为将h3.onClick属性设置为空白的复选框，如果未选中该复选框，则将其设置为正确的函数引用。

禁用父元素的onclick事件

5 个答案: