Jquery中透明图像上的触摸事件答案

【问题标题】：Touch events on Transperent Image in JqueryJquery中透明图像上的触摸事件
【发布时间】：2013-12-27 09:35:20
【问题描述】：

我有一个问题。我有 3 个图像（img1、img2、img3），其中一个是透明的，另外两个图像放在透明图像的下方。 img1 放置在下方（如背景图像），img2 放置在 img2 上方，最后是 img3（透明图像）。我想为 img2 执行操作，但触摸事件没有发生在透明图像（img3）之上。有没有办法在 img2 上触发触摸事件？请帮我解决这个问题.. 提前谢谢..

代码..

$('#bgTrnsImg').bind('touchend',function(e){
    $('#smallDustBean1').trigger('touchend');
});

$('#smallDustBean1').bind('click touchend',function(e){
    SpriteSheetExample1();
    alert("T1");
    // Does something special
    e.stopPropagation();
});

$('#bgTrnsImg').bind('touchend',function(e){
    $('#smallDustBean2').trigger('touchend');
});

$('#smallDustBean2').bind('click touchend',function(e){
    SpriteSheetExample2();
    alert("T2");
    // Does something special
    e.stopPropagation();
});

$('#bgTrnsImg').bind('touchend',function(e){
    $('#smallDustBean3').trigger('touchend');
});

$('#smallDustBean3').bind('click touchend',function(e){
    SpriteSheetExample3();
    alert("T3");
    // Does something special
    e.stopPropagation();
});

$('#bgTrnsImg').bind('touchend',function(e){
    $('#smallDustBean4').trigger('touchend');
});

$('#smallDustBean4').bind('click touchend',function(e){
    SpriteSheetExample4();
    alert("T4");
    // Does something special
    e.stopPropagation();
});


$('#bgTrnsImg').bind('touchend',function(e){
         $('#smallDustBean5').trigger('touchend');
    });

$('#smallDustBean5').bind('click touchend',function(e){
        SpriteSheetExample5();
        alert("T5");
        // Does something special
            e.stopPropagation();
        });

我正在更新我的代码，根据下面的答案，事件会在每次触摸透明图像时触发，而不是仅在特定的 img2(smallDustBeans) 上触发。在 HTML 文件中，img1 z-index 为 1，img2 z-index 为 2，img3 z-index 为 3

【问题讨论】：

标签： jquery html css image

【解决方案1】：

点击事件和触摸事件有区别。

如果您想在特定事件上隐式触发触摸，请像这样使用。

$('#img3').bind('touchend',function(e)
{
    $('#img2').trigger('touchend');
});

$('#img2').bind('click touchend',function(e)
{
    // Does something special
    e.stopPropagation();
});

【讨论】：

A.. 感谢您的回复，我也与 touchstart 进行了核实..我会检查并回复您
使用 touchend，因为用户可以将手指移出图像。或者，您可以结合 touchmove 事件...
是的，我已经检查了你的答案，它不起作用先生:-(你有我的问题，因为我的英语不好..
是的，我尝试过使用 touchend 但无法正常工作。由于透明图像，img2 没有进行触摸事件
是的，您是对的，它不会触发，除非您将 img2 的 z-index 更改为 3，否则请再次检查我的答案。

【解决方案2】：

您可以使用 jquery mobile js 进行触摸事件

$("#img2").on("tap",function(){
  alert("Touched");
}

【讨论】：

没有 jquery mobile。有没有可能实现？？

【解决方案3】：

嗨，我终于在这里找到了答案http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

设置指针事件：无；在 img3 上，它们会像指针（和触摸）事件一样不可见。

【讨论】：