Firefox：由HTML选择/选项触发的不需要的点击事件

我有一个select元素，option可供选择。选择一个option触发回调（在我真正的项目是创建页面，并加载内容到它使用Ajax调用一个新的元素的功能）。我可以通过select做在Firefox要么“s change事件处理程序，或由option S” click事件处理程序（见下面我的代码）。当你什么也不做，只需选择一个选项并点击它，这一切都可以完美运行。Firefox：由HTML选择/选项触发的不需要的点击事件

的问题，当你点击外面走出select的开始。例如，如果您通过单击打开下拉列表，然后通过使用键盘上的箭头步进某些option s，则单击select之外的单击会产生一个select.change（这很好）和一个option.click事件（这不是很好，因为没有人点击option）。虽然这种手势意味着放弃元素而不是选择一个选项），但是当你真正点击某些事件时也会触发事件（例如，在现实生活中，例如，创建或销毁页面上的元素）它会产生一团糟。

说到下面的示例代码，我想要实现的是，通过一个点击，无论是div或option是click版，永不两者。（我不关心select.change。）

我曾尝试select的两个捕获和解除绑定blur和focusout事件，但没有成功。

如何防止Firefox触发option.click当用户简单地放弃select？

打开选择，用箭头在键盘上来回移动，然后点击DIV（“点击这个div”）生产的JS控制台上的输出如下：

select was changed 
option1 was clicked 
div was clicked

我使用Firefox 50.1。 jQuery 1.4.2由我将使用的门户提供。

代码：OPTION标签

$('.myDiv') 
 
    .click(function (e) { 
 
     console.log('div was clicked'); 
 
     return false; 
 
    }) 
 
; 
 
$('.mySelect') 
 
    .change(function (e) { 
 
     console.log('select was changed'); 
 
     return false; 
 
    }) 
 
; 
 
$('.mySelect option') 
 
    .click(function (e) { 
 
     console.log($(this).val() + ' was clicked'); 
 
     return false; 
 
    }) 
 
;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
<div class='myDiv'>click on this div</div> 
 
<select class='mySelect'> 
 
<option disabled='disabled' selected='selected'>Please select an option</option> 
 
<option>option1</option> 
 
<option>option2</option> 
 
<option>option3</option> 
 
</select>

来源

2017-01-23 terminus.technicus

只需将e.preventDefault（）添加到您的函数 – Eric

@Eric由于我使用jQuery，'return false'应该暗示'preventDefault'，[请参阅此处]（http://stackoverflow.com/questions/1357118/事件的preventDefault-VS-返回FALSE）。不过，我也尝试明确说明，没有运气。显然问题不在于默认操作，而是触发事件本身。如果有的话，我怀疑只有一种解决方法可以提供帮助。 –

另一个失败的实验：'offsetX'和''offsetY' option.click'事件给出相同的恒定值内外的选择。如果'选项'不阻止事件冒泡，'select.click'也给出偏移量相同的常量。 –

onclick事件将无法在IE，Safari和Chrome的大多数版本：reference。

来源

2017-01-23 19:52:39

是的，我知道了。我只为Firefox做这个工作。 –

Firefox：由HTML选择/选项触发的不需要的点击事件

回答

相关问题