How can I pass a click through an element?

Question

I want to display an image under the mouse (a finger to simulate a touch screen) when a mousedown event occurs and hide it when the mouseup event occurs, but when I do this,

Answer 1

You can do this

$(document).bind('mousedown mouseup', function() {
    $('.finger').toggle();
});

Check working example at http://jsfiddle.net/2cSj4/2/

Answer 2

Billy Moon, your code was almost working. You just have to use hide and show instead of css :

$('#finger').click(function(e){
  evt = e || window.event;

  // make finger disappear
  $('#finger').hide(0);

  // get element at point of click
  starter = document.elementFromPoint(evt.clientX, evt.clientY);

  // send click to element at finger point
  $(starter).click();

  // bring back the finger
  $('#finger').show(0);
});

Answer 3

Check out this answer to on this post:

https://stackoverflow.com/a/4839672/589909

It seems to do what I understand what you want to achieve using a pure cross browser CSS approach.

pointer-events:none; touch-action:none;

Answer 4

This is untested - but is based on a working script of mine, so should be along the right lines. Basically, you have to make the layer that is in the way disappear for a moment, so you can use the elementFromPoint method and then make it come back.

$('.selector').click(function(e){
    evt = e || window.event;

    // make finger disappear
    $('.finger').css({display:'none'});

    // get element at point of click
    starter = document.elementFromPoint(evt.clientX, evt.clientY);

    // send click to element at finger point
    $(starter).click();

    // bring back the finger
    $('.finger').css({display:''});
});