在前端开发中，我们常常使用jQuery框架来简化DOM操作。其中一个常用的方法是.click()，它可以让我们在用户点击某个元素时执行一些代码。然而，在处理用户选择或者高亮文本的时候，可能会遇到一些问题，比如.click()在选择或高亮文本时会被触发。那么，如何解决这个问题呢？
问题原因
当我们选择或高亮文本时，浏览器会把该文本作为一个新的选区（selection）插入到DOM树中。此时，如果我们所选中的文本包含一个元素（例如一个链接），浏览器就会认为我们已经单击了该元素，并触发相应的事件。这就是.click()被触发的原因。
解决方案
要解决这个问题，我们可以使用以下两种方法：
方法一：检查事件是否由鼠标单击触发
我们可以通过检查事件对象的which属性来判断事件是否由鼠标单击触发。如果which属性的值为1，则表示事件由鼠标左键单击触发，否则表示事件由其他方式触发。因此，我们可以使用以下代码来避免在选择或高亮文本时触发.click()：
$('selector').click(function(e) {
if (e.which === 1) {
// 处理点击事件
}
});方法二：检查事件是否由用户触发
我们可以通过检查事件对象的target属性来判断事件是否由用户直接触发。如果target属性的值等于当前元素的DOM对象，则表示事件由用户直接触发，否则表示事件由其他方式触发。因此，我们可以使用以下代码来避免在选择或高亮文本时触发.click()：
$('selector').click(function(e) {
if (e.target === this) {
// 处理点击事件
}
});示例代码
以下是一个示例代码，演示如何使用上述方法来避免在选择或高亮文本时触发.click()：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ------------
------- -----------------------------------------------------------
--------
---------------------------- -
------------------------ -
-- -------- --- - -- -------- --- ----- -
---------- ------- --- --------
-
---
---
---------
-------
------
--------- -- --------- ---- ---- -- --- --------- ----- -- ---------------- ------------
-------
-------在上面的示例中，我们定义了一个链接，并为它绑定了一个.click()事件处理程序。在处理程序中，我们首先检查事件是否由鼠标左键单击触发，然后再检查事件是否由用户直接触发。如果两个条件都满足，则弹出一个消息框来提示用户已经单击了链接。这样，就可以避免在选择或高亮文本时触发.click()了。
总结
在处理用户选择或高亮文本的时候，我们可能会遇到.click()被触发的问题。为了解决这个问题，我们可以使用上述两种方法，分别检查事件是否由鼠标单击触发和是否由用户直接触发。通过这些方法，我们可以在保证用户体验的前提下，避免在选择或高亮文本时触发不必要的事件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30492