When the title attribute triggers the mousedown event, the mousemove event is triggered.

As we all know, the entire execution process of the mouse click event is: mousedown-> mouseup-> click, and the entire drag-and-drop process is: mousedown-> mousemove-> mouseup-> click

Let's look at a normal demo. We can test the click and drag-and-drop actions respectively.

We try to add the title attribute to # box and then try Click Event and drag-and-drop event respectively.

You can find that clicking also triggers the mousemove event because of the title.

In addition, the title attribute has a feature, that is, when you press the mouse, the prompt text will be hidden, and the mouse is lifted and displayed again, so you can try double-click, 2nd clicks will trigger the click event, because 1st clicks are performed after the title is not displayed, and the click event is triggered normally.

After finding this, we can try to avoid this small problem, because in some cases, an object may need to have both drag-and-drop and click functions, and ensure that these two functions do not conflict. The simplest way is to avoid using the title attribute, or you can refer to my implementation in hoorayos:

During mousedown and mouseup, the coordinates of the object are recorded and compared. If they are identical, the object is not dragged. Otherwise, the object has been dragged, in this case, the two cases can be handled separately in mouseup. DetailsCodeYou can view: Click to view

PS: this issue is currently only available in chrome, and does not appear in other browsers.