CODEWITHSUNDEEP
javascripthtmlgoogle-chromeonclick
voodoo
voodoo

Reputation: 95

click event not firing when moving mouse on an image

I have came across this problem where i have an onclick-event on an image but when the mouse moves between the mousedown and mouseup events it is not fired.

I have an image where I want to have an onlick event. I also dont want anyone to drag/select or open the context menu. Now what i found that on a touchscreen 50% of the times people click on some image what happens is that when they press the image their finger moves. So between the mousedown and mouseup events there is a tiny difference. But when they do that the click event is not fired (at least in chrome). Also the onmouseup-event is not fired.

look at this: https://fiddle.jshell.net/08pbjfq2/1/

clicking the image will display an alert and the Mouse up and down events but when u click and move more than 3 pixels or so with the mouse the click and the mouse up event is not fired. It also appears that if you click and then move your mouse by like 1 pixel the mousedown event and the onclick event gets fired but not the mouseup event. Is this a bug or am i missing something here?

Upvotes: 1

Views: 1124

Answers (1)

Kaiido
Kaiido

Reputation: 136766

This looks like an chrome bug.

This happens because you are preventing the drag-event, which should not be linked to the click event.

Workaround :

You can prevent the dragging by setting the draggable="false" attribute in chrome, but FF doesn't support it. So to support FF you'll still have to prevent the event.

var img1 = document.images[0];
img1.ondragstart = e => e.preventDefault();
img1.onclick = e =>  console.log('clicked first');

// to show that this is the problem in chrome :
var img2 = document.images[1];
img2.ondragstart = e => e.preventDefault();
img2.onclick = e =>  console.log('clicked second');
/* CSS can prevent selection */
img{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }
<img draggable="false" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTS0G-xT5r9xjdGAHlvZk2wdZVhyP6LOpOJE7PyNLXdUCs0pG-gqA" 
 />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTS0G-xT5r9xjdGAHlvZk2wdZVhyP6LOpOJE7PyNLXdUCs0pG-gqA" 
 />

Upvotes: 1

Related Questions