对事件冒泡/捕获和 jQuery 感到困惑

Question

我是 jQuery 的绝对菜鸟，在前端开发方面非常糟糕，所以这是我的问题。

使用以下 HTML

<select id="event_category_id" name="event_category_id">
  <option value="">Select Category</option>
  <option value="1">Category One</option>
  <option value="2">Category Two</option>
  <option value="3">Category Three</option>
</select>

还有下面的jQuery

$(document).ready(function() {
  // commands go here
  $('#event_category_id option').click( function(e) { 
    // e.stopImmediatePropagation();
    alert( $('#event_category_id option:selected').text() ); 
   });
});

单击一次，我会显示两次警报，每次都显示正确的选择文本。通过取消注释 stopImmediatePropagation 来纠正它。

所以我的问题是，如果这是事件冒泡/捕获，由于选择没有文本，只有选项，因此其中一个警报不会是空白的。

或者我认为所有这些工作的方式是错误的？

感谢您的宝贵时间。

Answer 1

不要使用click 事件。请改用change 事件。

$(document).ready(function() {  
   $('#event_category_id').change( function(e) { 
     alert( $(this).children('option:selected').text() ); 
   });
});

参考：change

Answer 2

试试……

$('#event_category_id').change( function(e) {    
   alert( $(this).find(':selected').text() ); 
});

play with the demo

Answer 3

试图将事件的冒泡解释为一个广泛的话题。

事件对象提供 .stopPropagation() 方法，该方法可以完全停止事件的冒泡过程。此方法是纯 JavaScript 功能，但不能在所有浏览器中安全使用。但是，如果所有的事件处理程序都使用 jQuery 正确注册，则可以使用该方法。

stopPropagation 阻止当前对象之外的任何对象接收事件，这可以在事件的任何阶段内。 stopImmediatePropagation 做同样的事情，但也采取了额外的步骤来防止当前目标中的其他事件也接收事件发生。

默认操作

当使用具有默认操作的元素时，例如在点击时具有重定向的默认操作。类似地，当用户在编辑表单时按下 Enter 键，会触发表单上的提交事件，但实际上在此之后才发生表单提交。

如果不需要这些默认操作，则在事件上调用 .stopPropagation() 将无济于事。这些动作在事件传播的正常​​流程中不会发生。相反，.preventDefault() 方法将用于在触发默认操作之前停止事件。

要停止冒泡和默认操作，即调用 .stopPropogation() 和 .preventDefault() 方法，您只需 return false;