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

Posted 2023-05-07

【中文标题】onclick 和 href 在移动设备上不能一起使用

【英文标题】：onclick and href doesn't work together on mobile device

【发布时间】：2014-06-10 18:45:35

【问题描述】：

我使用带有两个窗格的 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 打开一个新页面并同时启动一个功能，为什么它可以在桌面设备上运行而不是在移动设备上运行？

有人可以帮帮我吗？

【问题讨论】：

尝试使用ontouchend="testfunc()" 而不是onclick="testfunc()"

可以，但是当我使用 ontouchend 事件时，它不再适用于桌面版本。触控和桌面版本如何使用一个事件，还是应该使用两个不同的 html 文档？

【参考方案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');
);

【讨论】：

无论我用的是平板还是pc，总会出现“桌面”

很可能您没有包含mobilecheck 函数。你可以找到它here。 window.mobilecheck = function() ...

我包含了小提琴演示中的 mobilecheck。

【参考方案2】：

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

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

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

    //Do your thing

);

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

【讨论】：

但我希望“href”也被执行。

@mpears 将 href 的效果添加到事件监听器中可能是最简单的。因此，如果您想使用锚点：$(window).scrolltop( $("#element").offset().top )，或者如果您只想将其用作链接：location.href="http://google.com"; 希望对您有所帮助。