我处理的dblclick事件在跨度在我的web应用程序。双击的副作用是,它选择了页面上的文本。我怎样才能阻止这种选择的发生呢?
当前回答
对于那些正在寻找Angular 2+解决方案的人。
您可以使用表单元格的按下鼠标输出。
<td *ngFor="..."
(mousedown)="onMouseDown($event)"
(dblclick) ="onDblClick($event)">
...
</td>
和阻止如果详细> 1。
public onMouseDown(mouseEvent: MouseEvent) {
// prevent text selection for dbl clicks.
if (mouseEvent.detail > 1) mouseEvent.preventDefault();
}
public onDblClick(mouseEvent: MouseEvent) {
// todo: do what you really want to do ...
}
dblclick输出继续按预期工作。
其他回答
防止双击后才选择文本:
您可以使用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>
我知道这是一个老问题,但在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。防止=""到你的元素,它将神奇地消失!
在纯javascript中:
element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);
或者使用jQuery:
jQuery(element).mousedown(function(e){ e.preventDefault(); });
推荐文章
- ReactJS和公共文件夹中的图像
- 在React Native中使用Fetch授权头
- 为什么我的球(物体)没有缩小/消失?
- 如何使用jQuery检测页面的滚动位置
- if(key in object)或者if(object. hasownproperty (key)
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?
- angularjs中的compile函数和link函数有什么区别
- 删除绑定中添加的事件监听器
- 很好的初学者教程socket.io?
- HtmlSpecialChars在JavaScript中等价于什么?
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象