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;

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

3 个答案: