我处理的dblclick事件在跨度在我的web应用程序。双击的副作用是,它选择了页面上的文本。我怎样才能阻止这种选择的发生呢?
当前回答
旧线程,但我提出了一个解决方案,我相信是更干净的,因为它不禁用每个偶数绑定到对象,只防止随机和不需要的文本选择在页面上。这很简单,而且对我来说效果很好。 这里有一个例子;我想防止当我用类“arrow-right”在对象上单击几次时的文本选择:
$(".arrow-right").hover(function(){$('body').css({userSelect: "none"});}, function(){$('body').css({userSelect: "auto"});});
HTH !
其他回答
防止双击后才选择文本:
您可以使用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
我知道这是一个老问题,但在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()告知不要这样做,这对我来说比从一开始就防止事件冒泡更没有意义。
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+ */
}
或者,在mozilla上:
document.body.onselectstart = function() { return false; } // Or any html object
即,
document.body.onmousedown = function() { return false; } // valid for any html object as well
如果您试图完全阻止通过任何方法以及仅双击选择文本,您可以使用user-select: none css属性。我已经在Chrome 68中进行了测试,但根据https://caniuse.com/#search=user-select,它应该可以在其他当前正常的用户浏览器中工作。
从行为上看,在Chrome 68中,它是由子元素继承的,并且不允许选择元素包含的文本,即使该元素周围的文本已经被选中。
推荐文章
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 有Grunt生成index.html不同的设置
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- JavaScript: override alert()
- 重置setTimeout
- 如何确保<select>表单字段被禁用时提交?
- jQuery有不聚焦的方法吗?
- 反应钩子-正确的方式清除超时和间隔