我处理的dblclick事件在跨度在我的web应用程序。双击的副作用是,它选择了页面上的文本。我怎样才能阻止这种选择的发生呢?
当前回答
防止双击后才选择文本:
您可以使用MouseEvent#detail属性。 对于mousedown或mouseup事件,它是1加上当前的单击次数。
文档。addEventListener('mousedown',函数(事件){ If (event.detail > 1) { event.preventDefault (); //当然,你还是不知道你在这里阻止了什么… //你也可以检查event.ctrlKey/event.shiftKey/event.altKey //不阻止一些有用的东西。 } },假); 一些虚拟文本
参见https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
其他回答
我也有同样的问题。我通过切换到<a>和添加onclick="返回false;"(这样点击它就不会在浏览器历史记录中添加新的条目)。
我知道这是一个老问题,但在2021年仍然完全有效。然而,就回答而言,我没有提到Event.stopPropagation()。
OP要求dblclick事件,但从我看到同样的问题发生在指向事件。在我的代码中,我注册了一个监听器,如下所示:
this.addEventListener("pointerdown", this._pointerDownHandler.bind(this));
监听器代码如下所示:
_pointerDownHandler(event) {
// Stuff that needs to be done whenever a click occurs on the element
}
在我的元素上快速点击多次会被浏览器解释为双击。根据元素在页面上的位置,双击将选择文本,因为这是给定的行为。
您可以通过在侦听器中调用Event.preventDefault()来禁用该默认操作,这至少在某种程度上解决了问题。
然而,如果你在一个元素上注册了一个监听器,并编写了相应的“处理”代码,你也可以吞下事件,这就是event . stoppropagation()所确保的。因此,处理程序看起来如下所示:
_pointerDownHandler(event) {
event.stopPropagation();
// Stuff that needs to be done whenever a click occurs on the element
}
因为事件已经被我的元素消耗了,层次结构更上层的元素不知道该事件,也不会执行它们的处理代码。
如果让事件冒泡,层次结构中的更高层次的元素都将执行它们的处理代码,但被event . preventdefault()告知不要这样做,这对我来说比从一开始就防止事件冒泡更没有意义。
如果你正在使用Vue JS,只需追加@mousedown。防止=""到你的元素,它将神奇地消失!
function clearSelection() {
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
你也可以将这些样式应用到所有非ie浏览器和IE10的span上:
span.no_selection {
user-select: none; /* standard syntax */
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
在纯javascript中:
element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);
或者使用jQuery:
jQuery(element).mousedown(function(e){ e.preventDefault(); });
推荐文章
- 如何在Typescript中解析JSON字符串
- Javascript reduce()在对象
- 在angularJS中& vs @和=的区别是什么
- 错误"Uncaught SyntaxError:意外的标记与JSON.parse"
- JavaScript中的querySelector和querySelectorAll vs getElementsByClassName和getElementById
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?