JavaScript触发器单击iOS浏览器中的链接不起作用答案

【问题标题】：JavaScript trigger click a link in iOS browser not workingJavaScript触发器单击iOS浏览器中的链接不起作用
【发布时间】：2014-01-24 06:37:40
【问题描述】：

我有一个这样的链接：

<a href="index.html" class="link_to_home" target="_blank" style="display:none;">home</a>

我使用：

$('.link_to_home')[0].click();

但它不适用于 iOS 和 Android 浏览器。

【问题讨论】：

$('.link_to_home').trigger('click');
你如何使用它？尝试调试，可能你的js在触发点击之前就停止了
我的问题是，它可以在 pc 上的浏览器中工作，但不能在 android 和 ios 浏览器上的浏览器中工作。
尝试使用它，而不是 jquery - jqtjs.com
Trigger click event on link tag in JS for Android and iPhone的可能重复

标签： javascript android ios safari

【解决方案1】：

试试这个，普通的点击方法在iOS浏览器上是不行的。改用 DOM 方法 （它的跨浏览器）

HTML

<a href="index.html" id="yourAnchorId" class="link_to_home" target="_blank" style="display:none;">home</a>

Javascript

var ele = document.getElementById('yourAnchorId');
var click_ev = document.createEvent("MouseEvent");
click_ev.initEvent("click", false /* bubble */, true /* cancelable */);
ele.dispatchEvent(click_ev);

【讨论】：

@user3230788 尝试用 HTMLEvents 重新调整 MouseEvent，例如 document.createEvent("HTMLEvents");

【解决方案2】：

如您所知，在 Android 上，对于除锚标记之外的所有其他元素，只需调用 click() 即可。在 Android 上，对于锚标签，您需要在该元素上触发开始和结束触摸事件。来源（显示的打字稿 - Javascript 的超集）：

// 在 elementX 上触发点击（jquery 将解释为点击）的示例调用： Gremlins.tap([{ x: 1, y: 1 }], document.getElementById('yourAnchorId'));

    /**
     * trigger a touchevent
     * @param touches  Array of touch positions within the element (for a sequence of touches).  Ex: [{ x: 1, y: 1}]
     * @param element
     */
    private static tap(touches, element) {
        Gremlins.triggerTouch(touches, element, 'start');

        setTimeout(function () {
            Gremlins.triggerTouch(touches, element, 'end');
        }, 50);
    }

    /**
     * trigger a touchevent
     * @param touches  Array of touch positions within the element (for a sequence of touches).  Ex: [{ x: 1, y: 1}]
     * @param element
     * @param type - "start" or "end" of the process of 1 tap event
     */
    private static triggerTouch(touches, element, type) {
        var touchlist = [],
            event:any = document.createEvent('Event');

        event.initEvent('touch' + type, true, true);

        touches.forEach(function (touch, i) {
            var x = Math.round(touch.x),
                y = Math.round(touch.y);
            touchlist.push({
                pageX: x,
                pageY: y,
                clientX: x,
                clientY: y,
                screenX: x,
                screenY: y,
                target: element,
                identifier: i
            });
        });

        event.touches = (type == 'end') ? [] : touchlist;
        event.targetTouches = (type == 'end') ? [] : touchlist;
        event.changedTouches = touchlist;

        element.dispatchEvent(event);
    }

【讨论】：