防止悬停行为就像点击移动设备一样

时间:2014-04-25 13:07:45

标签: javascript jquery html css mobile

项目链接:

http://50.87.144.37/~projtest/wp/usefulcase/

当您在iPhone中测试链接并通过单击右上角的按钮打开菜单时,您会看到某些菜单项具有子菜单。当您单击主菜单项时,子菜单将打开,但页面将重定向到单击项目的链接。我需要防止这种情况发生。

以下是我申请的js,但它不起作用:

// see whether device supports touch events (a bit simplistic, but...)
var hasTouch = ("ontouchstart" in window);
var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window;

// hook touch events for drop-down menus
// NB: if has touch events, then has standards event handling too
// but we don't want to run this code on iOS5+
if (hasTouch && document.querySelectorAll && !iOS5) {
    var i, len, element,
        dropdowns = document.querySelectorAll(".menu li > a");

    function menuTouch(event) {
        // toggle flag for preventing click for this link
        var i, len, noclick = !(this.dataNoclick);

        // reset flag on all links
        for (i = 0, len = dropdowns.length; i < len; ++i) {
            dropdowns[i].dataNoclick = false;
        }

        // set new flag value and focus on dropdown menu
        this.dataNoclick = noclick;
        this.focus();
    }

    function menuClick(event) {
        // if click isn't wanted, prevent it
        if (this.dataNoclick) {
            event.preventDefault();
        }
    }

    for (i = 0, len = dropdowns.length; i < len; ++i) {
        element = dropdowns[i];
        element.dataNoclick = false;
        element.addEventListener("touchstart", menuTouch, false);
        element.addEventListener("click", menuClick, false);
    }
}

0 个答案:

没有答案