JS blocks browser default events

< H2 > effect < / H2 >

clipboard.png

there is an input box in this picture, and then I want to double-click and replace the text , but it is obvious that before replacing the text, the original text will be selected by the default event of mouse double-click , which can be said to be quite ugly.

so it involves masking the browser default event .

I tried. Binding the double-click event on the current control, that is, the input element, and then neither preventDefault nor stopPropagation nor return false, can prevent the default event of double-clicking selected text

on the document object, you can block

by returning false directly. < H2 > here comes the problem < / H2 >
  1. can you only tamper with double-click events of document objects by blocking double-click selected events like this?
  2. Can
  3. block this event by calling the function of the event object of the current element?

Note: onselectstart= "return false;" and css cannot be used, because the operation of dragging the mouse to select text cannot be shielded

Mar.03,2021
In the case of

, you can overwrite this element with a div with an opacity of 1%, and double-click what is actually triggered on the div.


try css style

-webkit-user-select: none;

I'll fill the hole myself. In vue, you can forget the modifier prevent and use it. But the strange thing is that if you don't use this modifier, you can no longer stop it in the later event handling. It is estimated that Vue uses the incoming function as a secondary call, not a directly bound

.
Menu