对事件冒泡/捕获和 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() ); 
   });
});

参考：更改

Answer 2

尝试...

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

玩一下演示

Answer 3

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

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

stopPropagation 阻止当前之外的任何对象接收事件，并且这可以在事件的任何阶段内。 stopImmediatePropagation 执行相同的操作，但还采取额外的步骤来防止接收事件的当前目标内发生其他事件。

默认操作

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

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

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