如何使用事件冒泡取消答案

【问题标题】：how to use event bubbling cancellation如何使用事件冒泡取消
【发布时间】：2010-09-08 13:44:29
【问题描述】：

我到处寻找有关如何阻止事件冒泡发生的代码，我在 Quirksmode 网站上找到了一个，它是这样的：

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

但我不知道如何以及在哪里使用它。 'e' 参数用作什么（或者应该作为 'e' 传递什么）？是否要在事件处理程序代码中调用此函数？ ...等等？

我需要一些帮助，请有人给我一些提示吗？

基本上，我有 4 个元素有一个名为“updateAvailableAttributes()”的“onchange”处理程序，如下所示：

<select id="deliveryMethod" name="deliveryMethod" onchange="updateAvailableAttributes();"></select>

<select id="formatMethod" name="formatMethod" onchange="updateAvailableAttributes();"></select>

<select id="yearsMethod" name="yearsMethod" onchange="updateAvailableAttributes();"></select>

<select id="updateMethod" name="updateMethod" onchange="updateAvailableAttributes();"></select>

这里是 updateAvailableAttributes() 脚本：

function updateAvailableAttributes() {
var form = document.forms["orderDefinition"];
form.elements["formChangeRequest"].value = "true";
$.ajax({
  type: "POST",
  url: "ajax/possibleValues.html",
  data: $("form#orderDefinition").serialize(),
  success: function(response){
    $('#usercontent .sleeve .toprow').html(response);

    applyValidation();
    radioButtonHighlightSelection();

  },
  error: function(response, ioArgs) {
         if (response.status == 601) {
             sessionTimedOut();
         } 
      }
});

// Display a "please wait" message
$("#waitingMsgOverlay, #waitingMsgBox, #waitingMsg, #waitingMsgParag").ajaxStart(function(){
      var map = document.getElementById("OrderMap");
      map.disableApplication();
      $(this).show();
      radioButtonHighlightSelection();
  }).ajaxStop(function(){
      var map = document.getElementById("OrderMap");
      map.enableApplication();
      $(this).hide();
      $("#toolpanel").height($("#orderMap").height());
      radioButtonHighlightSelection();
});}

我的问题是，如何将“doSomething(e)”与“onchange”事件处理程序中已有的“updateAvailableAttributes()”结合起来？

提前谢谢你。

【问题讨论】：

标签： javascript events event-bubbling

【解决方案1】：

整个 doSomething 就是事件处理程序本身。如果没有参数，您只需完全注册事件即可。 “e”参数由 JavaScript 运行时本身提供。

【讨论】：

@commanderz：感谢您的回答。我已经发布了更多信息。让问题更清楚。

【解决方案2】：

e 是事件。例如，如果你在另一个 div 中有一个 div，并且它们都有一个名为 doSomething 的 js 点击处理程序。所以在 onclick 属性中使用 onclick="doSomething(event);"如果你点击内部 div 外部现在不会处理它

【讨论】：

@Vinay B R：感谢您的回复。我已经编辑了我的问题，以便更清楚。
我还是 javascript 新手，所以事件冒泡问题对我来说仍然有点困惑。我只想将 doSomthing() 与我已经在我的“onchange”处理程序中的函数合并。但是我该怎么做呢？
如果您可以在此处粘贴您现有的脚本，我可以为您编辑它
使用 onchange="updateAvailableAttributes();doSomething(event);"
酷！谢谢你。我也可以在 updateAvailableAttributes() 内部调用 doSomething() 并使用“this”将 e 作为参数传递吗？可能是我想太多了……

【解决方案3】：

在 DOM 模型中，有各种与元素相关的事件，例如onclick。如果要处理任何事件，请将事件侦听器附加到元素。例如element.addEventListner(event,yourfunction,bubble)。

看到这个http://www.quirksmode.org/js/events_advanced.html

【讨论】：

感谢您的回答。我刚刚阅读了 addEventListener 文章，但因为我对 Javascript 有点陌生，所以我仍然错过了情节......