javascript - 触摸并单击时图像全屏

Question

我可以通过在 PC 上点击来实现此功能，但在移动设备上点击则无法实现。

$('.img-responsive').on('click', function(){
    var src = $(this).attr('src');
    $('<div>').css({
        background: 'RGBA(0,0,0,.5) url('+src+') no-repeat center',
        backgroundSize: 'contain',
        width:'100%', height:'100%',
        position:'fixed',
        zIndex:'10000',
        top:'0', left:'0',
        cursor: 'zoom-out'
    }).on('click', function(){
        $(this).remove();
    }).appendTo('body');
});

有人有什么建议吗？

谢谢!

Answer 1

使用 HTMLEvents 对象和 document.createEvent() 来模拟对链接的点击。

    var link = document.getElementById( 'link_to_click' ),
    event = document.createEvent( 'HTMLEvents' );

    event.initEvent( 'click', true, true );
    link.dispatchEvent( event );