onclick 和 href 在移动设备上不能一起使用

Question

我使用带有两个窗格的 kendo ui splitview。这是我尝试过的：

<ul>
<li data-icon="net"><a id="clicker" onclick="testfunc()" href="#emptytestpage" data-target="main-pane">Empty </a></li>
</ul>

function testfunc(){


    alert("TEST");
}
</script>

这在带有 win7 或其他台式计算机的谷歌浏览器上效果很好，但是当我 在带有 android 的平板电脑或在 iphone 上启动它不起作用。在移动设备上，onlick 事件不起作用，我不知道为什么。如何使用 href 打开一个新页面并同时启动一个功能，为什么它可以在桌面设备上运行而不是在移动设备上运行？

有人可以帮帮我吗？

Answer 1

您应该删除内联的onclick 和ontouchend 事件。然后您可以根据平台动态添加click 或touchend 事件：移动端或桌面端。我也做了一个fiddle。

类似的东西：

$(document).ready(function() {
    var clickHandler = function(e) {
            // Do other stuff on desktop;
            alert('desktop');
        },
        touchendHandler = function(e) {
            // Do other stuff on mobile;
            alert('mobile');
        },
        initClickOrTouchEventFor = function(elementSelector) {
            var el = $(elementSelector);

            // We're on mobile.
            if (mobilecheck()) {
                console.log('attaching touchend event on mobile');

                el.on('touchend', touchendHandler);
            }
            // We're on desktop.
            else {
                console.log('attaching click event on desktop');

                el.on('click', clickHandler);
            }
        };

    initClickOrTouchEventFor('#clicker');
});

Answer 2

我不会在元素属性上放任何东西，而是在 jquery 中设置一个事件监听器。

$("#clicker").on("click",function(evt){

    evt.stopPropagation();evt.preventDefault(); //Prevents the href

    //Do your thing

});

http://jsfiddle.net/uA8b6/（在 iPad Mini 上测试）