10

ホバー機能があります。タッチデバイスの場合は、ホバーイベントが発生しないようにします。問題は、タッチデバイスでリンクをタップすると、クリックイベントを実行する前にホバーイベントが実行されるため、リンクを2回タップする必要があることです。

これはホバー機能です：

$("#close").hover( 
    function () { 
        $("#close_2").css({
            display: "none"
        });
        $("#close_1").css({
            display: "block"
        });
    }, 
    function () {
        $("#close_1").css({
            display: "none"
        });
        $("#close_2").css({
            display: "block"
        });;
    }
);

次に、これをクリック機能として設定します。

$('#close').click(function() {
    var id = $(this).attr('id');
    $('#full_image').animate({
        height: 0
    }, 300, function() {
        $('#full_image img').attr('src','#');
    });
    $("#close_1").css({
        display: "none"
    });
    $("#close_2").css({
        display: "none"
    });
    $("#close").css({
        display: "none"
    });
});
4

5 に答える 5

15

.hover（）メソッドをより明示的にし、.on（）と組み合わせます。

var $close1 = $('#close_1'),
    $close2 = $('#close_2');

$('#close').on({
    mouseenter: function(){
        $close2.css({display:'none'});
        $close1.css({display:'block'});
    },
    mouseleave: function(){
        $close1.css({display:'none'});
        $close2.css({display:'block'});
    }
});

次に、それを.off（）と組み合わせます。

$('#close').on('touchstart',function(){
    $(this).off('mouseenter,mouseleave');
});

タッチデバイスでクリックしたときにイベントを発生させたいが、デスクトップデバイスでホバーしたい場合は、それらのアクション内で呼び出す個別の関数として関数を配置します。

編集

私がこの答えをしたのでしばらく経ちました、ここにもっと良い方法があります：

$(function(){
    var isTouchDevice = ('ontouchstart' in window || 'onmsgesturechange' in window),
        $close = $('#close'),
        $close1 = $('#close_1'),
        $close2 = $('#close_2');

    if(!isTouchDevice){
        $close.on({
            mouseenter: function(){
                $close2.hide();
                $close1.show();
            },
            mouseleave: function(){
                $close1.hide();
                $close2.show();
            }
        });
    }

    $close.on('click',function(){
        $('#full_image').animate({height:0},300,function(){
            $(this).find('img').attr('src','#');
        });

        $close.hide();
        $close1.hide();
        $close2.hide();
    });
});

これは、タッチするたびに発生する「ホバー防止」イベントを必要とせず、基本的に、クリックイベントに影響を与えずに、ページの読み込み時に機能を設定します。

于 2013-01-17T22:04:05.280 に答える
5

明確なアプローチは次のとおりだと思います。

  1. ブラウザがタッチイベントをサポートしているかどうかを検出します
  2. それに応じてホバーイベントハンドラーを追加します

すでにModernizrのようなものを使用している場合：

if(!Modernizr.touch){
    // only if the browser doesn't support touch events,
    // add the hover handler here.
}
//add the click handler here, as you want it bound no matter what

JavaScriptを使用して「タッチスクリーン」デバイスを検出するための最良の方法は何ですか？を参照してください。JavaScriptを使用して「タッチスクリーン」デバイスを検出するための最良の方法は何ですか？タッチ機能を検出するための他のオプションについて。

于 2013-01-17T22:18:05.997 に答える
3

モバイル側では、touchstartイベントでpreventDefaultを呼び出すと、 mouseover、mouseenter、mousedown、および関連イベントが防止されます。詳細：https ：//patrickhlauke.github.io/touch/tests/results/

    $('#close').on('touchstart',function(e){
        console.log('touchstart');
        e.preventDefault();
        //Do touch stuff
    });
于 2016-05-10T06:00:24.243 に答える
2

Windows 8とUltrabooksのおかげで、タッチイベントとポインターイベントの両方をサポートするデバイスがたくさんあると思います。結果として、マウスを使ったタッチ対応ユーザーのサイトを壊す可能性があるため、ホバーイベントを完全に無効にすることは避けています。

この問題を解決するために、メニューの表示に2つの異なるクラスを使用し、ホバーとタップに別々のイベントを.hover使用することになりました。.touch

タップイベントをキャプチャするためにjquery.fingerを使用していますが、どのプラグインでも機能するはずですが、これは最小のものでした。

HTMLは次のようになります。

<li>
    <a>Some Link</a>
    <div>Some Content</div>
</li>

CSSは次のようになります。

li div {display:none;}
li.hover div, li.touch div {display:block;}

そして、JQueryを使用したJavascript：

// Caching whatever elements I'm using for the navigation
a = $("a");
li = $("li");

// Set hover events
li.hover(

    // Both hover in and out fire whenever the user taps, aggravating!
    function(e) {
        // Close unused menus
        li.not(this).removeClass("hover").removeClass("touch");

        // Show this menu
        $(this).addClass( "hover" );
    }, function(e) {
        // Only closes if the menu doesn't have .touch, hell yeah!
        li.removeClass("hover");
    }

);

// Set the tap event
a.on('tap',function(e,data){
    e.stopPropagation();
    var thisParent = $(this.parentNode);

    // Close unused menus
    li.not(thisParent).removeClass("touch");

    // Toggle the current menu
    thisParent.toggleClass("touch");

    // The menu is open, so we don't need this class anymore
    li.removeClass("hover");
});

// Prevent the list items when being tapped from closing the drop down
li.on('tap',function(e){e.stopPropagation();});

// Close drop downs when tapping outside the menus
$(document).on('tap',function(e){
   li.removeClass("touch");
});

ここで重要なポイントは、イベントに応じて個別のクラス.hoverまたはクラスを追加する方法と、未使用のクラスを削除する方法です。.touchメニューが点滅しないように、順序は重要です。

于 2013-11-22T20:47:00.160 に答える
-5

タッチ検出を使用することになりました：

var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);

if(agentID) { 
    $('#close').click(function() {
        var id = $(this).attr('id');
        $('#full_image').animate({
            height: 0
        }, 300, function() {
            $('#full_image img').attr('src','#');
        });
        $("#close_1").css({
            display: "none"
        });
        $("#close_2").css({
            display: "none"
        });
        $("#close").css({
            display: "none"
        });
    });
}
else {
    $('#close').hover(
        function() {
            $("#close_2").css({
                display: "none"
            });
            $("#close_1").css({
                display: "block"
            });
        }, function() {
            $("#close_1").css({
                display: "none"
            });
            $("#close_2").css({
                display: "block"
            });
        }
    ); 
    $('#close').click(function() {
        var id = $(this).attr('id');
        $('#full_image').animate({
            height: 0
        }, 300, function() {
            $('#full_image img').attr('src','#');
        });
        $("#close_1").css({
            display: "none"
        });
        $("#close_2").css({
            display: "none"
        });
        $("#close").css({
            display: "none"
        });
    });
}
于 2013-01-17T22:22:33.423 に答える