Vant: ImagePreview鼠标单击图片外的黑色背景部分，无法关闭

Created on 12 Feb 2018 · 6Comments · Source: youzan/vant

问题如上
Vant版本：0.12.9
Vue 版本： 2.9.3

谷歌浏览器响应模式可以正常关闭，非响应模式下就不行。
火狐浏览器响应模式开启触摸模拟可以。

Source

fushall1104

All 6 comments

ImagePreview 监听的是 Touch 事件，所以在不支持 Touch 事件的浏览器上是无法操作的，在手机上可以正常操作

chenjiahan on 12 Feb 2018

@chenjiahan
您好，我发现官方的demo单击也是可以关闭的。
Popup也是可以鼠标单击后关闭的，官方可以支持一下这个特性吗？
本人实在新手，我希望请教您一下，如果您可以抽出一些时间的话，我想知道那是怎么做到的，可以简单提示一下吗？？

fushall1104 on 12 Feb 2018

官方的示例是额外引入了一个库去在 PC 上模拟 Touch 事件的，链接：https://github.com/hammerjs/touchemulator

chenjiahan on 23 Feb 2018

😕6 👎4

官方的示例是额外引入了一个库去在 PC 上模拟 Touch 事件的，链接：https://github.com/hammerjs/touchemulator

这个库要怎么用啊

lyre220 on 8 Nov 2018

实际测试结果，如果想兼容PC，https://github.com/hammerjs/touchemulator 这个和官方的示例其实还不同，官方示例的代码如下

(function(t, n) {
    var e;
    document.createTouch || (document.createTouch = function(t, n, e, o, r, a, s) {
        return new i(n,e,{
            pageX: o,
            pageY: r,
            screenX: a,
            screenY: s,
            clientX: o - window.pageXOffset,
            clientY: r - window.pageYOffset
        },0,0)
    }
    ),
    document.createTouchList || (document.createTouchList = function() {
        for (var t = o(), n = 0; n < arguments.length; n++)
            t[n] = arguments[n];
        return t.length = arguments.length,
        t
    }
    );
    var i = function(t, n, e, i, o) {
        i = i || 0,
        o = o || 0,
        this.identifier = n,
        this.target = t,
        this.clientX = e.clientX + i,
        this.clientY = e.clientY + o,
        this.screenX = e.screenX + i,
        this.screenY = e.screenY + o,
        this.pageX = e.pageX + i,
        this.pageY = e.pageY + o
    };
    function o() {
        var t = [];
        return t.item = function(t) {
            return this[t] || null
        }
        ,
        t.identifiedTouch = function(t) {
            return this[t + 1] || null
        }
        ,
        t
    }
    function r(t) {
        return function(n) {
            var i, o, r;
            1 === n.which && (("mousedown" === n.type || !e || e && !e.dispatchEvent) && (e = n.target),
            i = t,
            o = n,
            (r = document.createEvent("Event")).initEvent(i, !0, !0),
            r.altKey = o.altKey,
            r.ctrlKey = o.ctrlKey,
            r.metaKey = o.metaKey,
            r.shiftKey = o.shiftKey,
            r.touches = s(o),
            r.targetTouches = s(o),
            r.changedTouches = a(o),
            e.dispatchEvent(r),
            "mouseup" === n.type && (e = null))
        }
    }
    function a(t) {
        var n = o();
        return n.push(new i(e,1,t,0,0)),
        n
    }
    function s(t) {
        return "mouseup" === t.type ? o() : a(t)
    }
    function l() {
        !function() {
            for (var t = [window, document.documentElement], n = ["ontouchstart", "ontouchmove", "ontouchcancel", "ontouchend"], e = 0; e < t.length; e++)
                for (var i = 0; i < n.length; i++)
                    t[e] && void 0 === t[e][n[i]] && (t[e][n[i]] = null)
        }(),
        window.addEventListener("mousedown", r("touchstart"), !0),
        window.addEventListener("mousemove", r("touchmove"), !0),
        window.addEventListener("mouseup", r("touchend"), !0)
    }
    l.multiTouchOffset = 75,
    new l
})()