Question

我正在一个快速响应的网站上工作。有一种类型的导航元素是可点击的图像链接。我在页面上有很多这些。在鼠标移动此图像时，在普通台式计算机上，它会更改颜色（+更多），并在您鼠标移开时更改回来。单击后，您将链接到新网页。现在，这是通过一个简单的JavaScript事件处理程序编码的。

<a href="http://myfakewebsite.com/next_page_1.html">
       <img onmouseover="{ this.src = 'image_1_red.png'; }" 
            onmouseout="{ this.src='image_1_normal.png'; }"
        src='image_1_normal.png'
       />
</a>

问题是当iPad用户点击可点击的事件时，会发送以下元素.. mouseover，mousemove，mousedown，mouseup和click。那个鼠标悬停事件肯定会让我烦恼。 image_1_normal图像消失了几分之一秒，并且在网站捕捉到新网址之前的一段时间内，您会看到一个可见图标（带有蓝色背景和白色边框的白色问号）。没有足够的时间来显示image_1_red。整个影响看起来很奇怪。它足以让我的顾客感到高兴。有没有办法缓解这个问题？ JavaScript中有没有办法说...

if this is a mobile touch device, then skip the whole mouseover thing？

有没有办法通过事件处理程序内联执行此操作，或者我将不得不为脚本中的所有元素创建事件侦听器？

所以我对代码进行了更新：

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", init, false);

    function init() {

        var image_1 = document.getElementById("image_1_nav");
        var image_2 = document.getElementById("image_2_nav"); .. etc... 

        if (!("ontouchstart" in document.documentElement)){
            image_1.addEventListener("onmouseover", function(){
               this.src="image_1_red.png";}, false);
        }

        if ("ontouchstart" in document.documentElement){
            alert( "Mobile device with Touchstart"); }
    }
</script>

警报测试在ipad上正常工作，而不是在桌面上。

现在我无法获得onmouseover功能来注册... 首先，系统不喜欢if (!"ontouchstart" in document.documentElement){我必须将其更改为if(!("ontouchstart" in document.documentElement)){才能正确注册。我现在一直试图找出为什么我无法看到onmouseover的事件监听器......

Answer 1

因此，从我所看到的情况来看，在移动设备上查看网站时似乎没有办法使用'内联'事件处理程序来避免OnMouseOver。这段代码似乎有效：

<a href="http://myfakewebsite.com/next_page_1.html"><img src='image_1_normal.png' /></a>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", init, false);

    function init() {

        var image_1 = document.getElementById("image_1_nav");
        var image_2 = document.getElementById("image_2_nav"); //.. etc... 

        if (!("ontouchstart" in document.documentElement) && 
            ! (navigator.maxTouchPoints > 0) &&
            ! (navigator.msMaxTouchPoints > 0) ){
            image_1.addEventListener("mouseover", function(){
               this.src="image_1_red.png";}, false);

            image_1.addEventListener("mouseout", function(){
               this.src="image_1.png";}, false);             // .. etc... 
        }   
    }
</script>

因此，在移动设备（iPad）上，原始图像在点击过程中根本不会被修改，没有奇怪的瞬间弹出图标，没有恼怒的客户。哦，非常感谢ManuelIgnacioLópezQuintero for this blog entry.和Patrick H. Lauke和Robert Nyman的article on detecting touch.

使用iPad或其他移动设备时不受欢迎的鼠标悬停效果

1 个答案: