JavaScript 事件冒泡

发布于 2024-11-07 04:02:30 字数 305 浏览 0 评论 0原文

我有这样的设置

<div onclick="SomeEvent">
    <input type=checkbox value=1>1
    <input type=checkbox value=2>2
    <input type=checkbox value=3>3
</div>

当用户单击复选框时出现问题我不希望触发 SomeEvent。

在某些情况下我确实有这条线
“event.stopPropagation();”
但这似乎根本没有任何作用。

原文

I have this setup

<div onclick="SomeEvent">
    <input type=checkbox value=1>1
    <input type=checkbox value=2>2
    <input type=checkbox value=3>3
</div>

The problem when the user click on the checkboxes I don't want the SomeEvent fired.

In the some event I do have the line
"event.stopPropagation();"
but that seems to do nothing at all.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

愛放△進行李 2024-11-14 04:02:30

在事件冒泡模型中，事件传播是从内部元素到外部元素。

这意味着 event.stopPropagation(); 应该位于输入的事件中，而不是 div 中。

<div onclick="SomeEvent">
  <input type=checkbox value=1 onclick="stopPropagation()">1
  <input type=checkbox value=2 onclick="stopPropagation()>2
  <input type=checkbox value=3 onclick="stopPropagation()>3
</div>

现在是 Javascript 代码：

function stopPropagation() {
  //... do something.
  //stop propagation:
  if (!e) var e = window.event;
  e.cancelBubble = true; //IE
  if (e.stopPropagation) e.stopPropagation(); //other browsers
}

编辑：上面是展示冒泡模型如何工作的快速方法，但使用 JQuery 解决此问题的更好答案是：

<div id="mydiv">
  <input type="checkbox" value="1" /> 1
  <input type="checkbox" value="2" /> 2
  <input type="checkbox" value="3" /> 3
</div>

现在是 Javascript 代码：

$('#mydiv').click(function(e) {
  //do something
});

$('#mydiv input').click(function(e) {
  //stop propagation:
  if (!e) var e = window.event;
  e.cancelBubble = true; //IE
  if (e.stopPropagation) e.stopPropagation(); //other browsers
});

In the event bubbling model, the event propagation is from the inner elements to the outer elements.

This means that the event.stopPropagation(); should be in the inputs' events instead of the div.

<div onclick="SomeEvent">
  <input type=checkbox value=1 onclick="stopPropagation()">1
  <input type=checkbox value=2 onclick="stopPropagation()>2
  <input type=checkbox value=3 onclick="stopPropagation()>3
</div>

Now the Javascript code:

function stopPropagation() {
  //... do something.
  //stop propagation:
  if (!e) var e = window.event;
  e.cancelBubble = true; //IE
  if (e.stopPropagation) e.stopPropagation(); //other browsers
}

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

EDIT: The above was a quick way to show how the bubbling model works, but a better answer to solve this problem using JQuery would be:

<div id="mydiv">
  <input type="checkbox" value="1" /> 1
  <input type="checkbox" value="2" /> 2
  <input type="checkbox" value="3" /> 3
</div>

Now the Javascript code:

$('#mydiv').click(function(e) {
  //do something
});

$('#mydiv input').click(function(e) {
  //stop propagation:
  if (!e) var e = window.event;
  e.cancelBubble = true; //IE
  if (e.stopPropagation) e.stopPropagation(); //other browsers
});

回复收藏 0 原文

送君千里 2024-11-14 04:02:30

将内联 onclick 更改为：

onclick="SomeEvent(this, event)"

然后在 SomeEvent 中，执行以下操作：

function SomeEvent( el, event ) {
    var target = event.srcElement || event.target;

    if( el === target ) {
        // run your code
    }
}

这只会在您单击 div 元素本身（而不是后代）时触发代码。

如果有其他后代应该触发处理程序，则执行以下操作：

function SomeEvent( el, event ) {
    var target = event.srcElement || event.target;

    if( target.nodeName.toLowerCase() !== 'input' || !target.type || target.type !== 'checkbox' ) {
        // run your code
    }
}

这将为除复选框之外的任何单击触发处理程序。

Change the inline onclick to this:

onclick="SomeEvent(this, event)"

Then in SomeEvent, do this:

function SomeEvent( el, event ) {
    var target = event.srcElement || event.target;

    if( el === target ) {
        // run your code
    }
}

This will only fire the code when you click on the div element itself, instead of a descendant.

If there are other descendants that should fire the handler, then do this:

function SomeEvent( el, event ) {
    var target = event.srcElement || event.target;

    if( target.nodeName.toLowerCase() !== 'input' || !target.type || target.type !== 'checkbox' ) {
        // run your code
    }
}

This will fire the handler for any click except those on the checkboxes.

回复收藏 0 原文

~没有更多了~