8

マウスオーバー メニューが必要な Web サイトで作業しています。アクセシビリティの観点からはマウスオーバー メニューはお勧めしませんが、jQuery を使用して実装するのは非常に簡単です。

問題: タッチスクリーン デバイス (タブレット) もサポートする必要があります。このようなデバイスではマウスがないため、マウスオーバー イベントは機能しません。jQuery に longpress イベントがあることを期待していましたが、そうではありません。Google を使用してjQuery longclick プラグインを見つけましたが、それは jQuery 1.4 用だったので、それを使用することに熱心ではありません。また、jQuery プラグインのサイトは現在メンテナンス中のため、あまり役に立ちません。

質問: longpress / longclick イベントをサポートする jQuery 1.7 / 1.8 用のエレガントなプラグインはありますか?

4

3 に答える 3

7

jQuery 1.8 では、jQuery 1.4 用の既存のlongclick プラグインをそのまま使用できることがわかりました。

$("#area").mousedown(function(){
    $("#result").html("Waiting for it...");
});
$("#area").longclick(500, function(){
    $("#result").html("You longclicked. Nice!");
});
$("#area").click(function(){
    $("#result").html("You clicked. Bummer.");
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://rawgit.com/pisi/Longclick/master/jquery.longclick-min.js"></script>
    
<p id="area">Click me!</p>
<p id="result">You didn't click yet.</p>

于 2012-08-29T16:30:54.060 に答える
5

あなたができることはsetTimeout、さまざまなマウスイベント中に遅延チェックを使用することです。jQuery を組み込ん$.data()でイベント間 (各要素) のタイムアウトを保存すると、すべてを達成するのに役立ちます。次に例を示します。

HTML:

<ul id="menu">
    <li><a href="#" onclick="return false;" class="test"></a></li>
    <li><a href="#" onclick="return false;" class="test"></a></li>
</ul>

JS:

var mousepress_time = 1000;  // Maybe hardcode this value in setTimeout
var orig_message = "Click Here";  // Remove this line
var held_message = "Down";  // Remove this line

$(document).ready(function () {
    $(".test")
        .html(orig_message)  // Remove this line
        .on("mousedown", function () {
            console.log("#########mousedown");  // Remove this line
            var $this = $(this);
            $(this).data("checkdown", setTimeout(function () {
                // Add your code to run
                $this.html(held_message);  // Remove this line
            }, mousepress_time));
        }).on("mouseup", function () {
            clearTimeout($(this).data("checkdown"));
            console.log("#######mouseup");  // Remove this line
            $(this).html(orig_message);  // Remove this line
        }).on("mouseout", function () {
            clearTimeout($(this).data("checkdown"));
            console.log("#######mouseout");  // Remove this line
            $(this).html(orig_message);  // Remove this line
        });
});

デモ: http://jsfiddle.net/7jKYa/10/

ホバリングも組み込んでいるので、これには他にも多くのことがありますが、ほとんどの場合、これはあなたが望むことだと思います。

必要に応じて簡単にプラグインに変換できますが、それ以外の場合は単独で問題なく動作すると思います。これが役立つことを願っています！

于 2012-08-27T16:30:24.927 に答える