我处理的dblclick事件在跨度在我的web应用程序。双击的副作用是,它选择了页面上的文本。我怎样才能阻止这种选择的发生呢?
当前回答
一个简单的Javascript函数,使页面元素中的内容不可选:
function makeUnselectable(elem) {
if (typeof(elem) == 'string')
elem = document.getElementById(elem);
if (elem) {
elem.onselectstart = function() { return false; };
elem.style.MozUserSelect = "none";
elem.style.KhtmlUserSelect = "none";
elem.unselectable = "on";
}
}
其他回答
在纯javascript中:
element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);
或者使用jQuery:
jQuery(element).mousedown(function(e){ e.preventDefault(); });
我知道这是一个老问题,但在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()告知不要这样做,这对我来说比从一开始就防止事件冒泡更没有意义。
防止双击后才选择文本:
您可以使用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
顺风CSS:
<div class="select-none ...">
This text is not selectable
</div>
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+ */
}
推荐文章
- 打印在 JsFiddle 中
- AngularJS只适用于单页应用程序吗?
- Javascript和regex:分割字符串并保留分隔符
- 如何检查DST(日光节约时间)是否有效,如果是,偏移量?
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?
- 如何创建一个日期对象从字符串在javascript
- 输入触发器按钮单击
- 获取对象的属性名
- 如何检查用户是否可以回到浏览器历史
- 相当于字符串。jQuery格式
- 如何在vue-cli项目中更改端口号
- Angular 2模板中的标签是什么意思?
- JavaScript .includes()方法的多个条件
- 窗口。亲近与自我。close不关闭Chrome中的窗口