iPhone 和 Android 上的 CSS 悬停状态答案

【问题标题】：CSS hover state on iPhone and AndroidiPhone 和 Android 上的 CSS 悬停状态
【发布时间】：2014-04-09 11:38:38
【问题描述】：

在移动设备上，我想使用 CSS 悬停状态。

我发现在 iPhone/iPad 上，用户第一次点击结果悬停状态，第二次点击产生点击事件。

完美。

我希望在 Android 上也一样。

第一次点击 - 悬停状态第二次点击 - 点击事件

提前谢谢你。

【问题讨论】：

现在在安卓上也一样。

标签： android css iphone hover tap

【解决方案1】：

我找到了解决办法。

它在 Android 上的工作方式与在 iPhone/iPad 上完全相同。

var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window;

// but we don't want to run this code on iOS5+
if (document.querySelectorAll && !iOS5) {
    var i, el,
        dropdowns = document.querySelectorAll("li.menu-item > a");

    function menuClick(e) {
        // if click isn't wanted, prevent it
        var element = jQuery(this);

        var noclick = element.attr('dataNoclick');
        noclick = (noclick === 'true' ? 'false' : 'true');
        // reset flag on all links
        for (i = 0; i < dropdowns.length; i++) {
            el = jQuery(dropdowns[i]);
            el.attr('dataNoclick', 'false');
        }

        // set new flag value and focus on dropdown menu
        element.attr('dataNoclick', noclick);
        if (noclick === 'true') {
            e.preventDefault(); 
            for (i = 0; i < dropdowns.length; i++) {
                el = jQuery(dropdowns[i]);
                el.removeClass('hover');
            }

    if(noclick) element.removeClass('hover');
    else element.addClass('hover');
    }
    }

    for (i = 0; i < dropdowns.length; i++) {
        el = jQuery(dropdowns[i]);
        el.attr('dataNoclick', 'false');
        el.click(menuClick);
    }
}

hover 类定义如下。

li.menu-item a:hover,
li.menu-item a.hover {
    /* Same code goes here for hover pseudo code and hover class */
}

希望这对某人有所帮助。

【讨论】：

【解决方案2】：

为视图添加GestureDetector.SimpleOnGestureListener 以检测单击和双击，并使用方法 onSingleTapConfirmed() 用于悬停状态和 onDoubleTap() 用于单击事件。

或者您可以在检测到点击时使用计数，并对每个计数执行不同的方法。

在 onCreate 方法之外全局声明一个变量：

//Declaring the variable to count the number of clicks
            int count = 0;

然后在 onCreate 方法中实现以下内容。在这里，我们在 Button 上设置了 OnClickListener：

// Declaring the Button and Type Casting it.
        Button btn1 = (Button) findViewById(R.id.button1);
        // Setting OnClickListener on btn1
        btn1.setOnClickListener(new OnClickListener() {
            @Override
        public void onClick(View v) {
            //Executing the following code on the click
//Incrementing the variable count by 1 on the click of the button
            count++;
//Displaying the count using a Toast Toast.makeText(MainActivity.this,
"The button has been clicked " + count +     " times",Toast.LENGTH_SHORT).show();
        }
    });

【讨论】：