支持触控设备的Jquery hoverIntent/hover功能

Question

我们有一个jquery js函数，它可以基于鼠标悬停和鼠标移出来打开和关闭覆盖。但这并不适用于触摸屏笔记本电脑或平板电脑。我正在阅读关于touchstart和touchmove函数的文章，并实现了如下所示的新函数。但它并不像鼠标悬停或滑出那样工作。我能做到这一点的最好方法是什么？

$("#someDiv").hoverIntent({
            sensitivity: 2,
            interval: 200,
            timeout: 500,
            over: function(){
            //opens the overlay 
            $(this).someFunc();
            },
            out: function(){
                $(this).someFunc1();//closes the overlay
            }
        })

新功能：

$('#someDiv').on('touchstart',function (event) {
                 setTimeout(function() {
                   $(this).someFunc();//open overlay
               }, 500);
             });

//touchend不工作-看起来类似于mouseout

$('#someDiv').on('touchend',function () {
        $(this).someFunc1();//close overlay
        });

//关闭

$('body').on('touchstart', function(e){
    $(this).someFunc1();//close overlay
});

附注:我只需要使用jquery来实现它。

非常感谢。

Answer 1

找到这个：jQuery taphold Event

下面是该页面的代码。

以下是指向taphold文档的链接

​

$(document).on("pagecreate","#pageone",function(){
  $("p").on("taphold",function(){
    $(this).hide();
  });                       
});

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>The taphold Event</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>If you tap and hold me for one second, I will disappear.</p>
    <p>Tap and hold me!</p>
    <p>Tap and hold me too!</p>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

​

一个使用它的例子：richadams/jquery-taphold。我转换了他的test.html页面，以便在这里的代码片段中使用，并将他的脚本放在脚本标记中。这只使用jQuery，而不使用jQuery UI或jQuery mobile。如果你不想使用他的代码，你可以检查他是如何做到的，并根据你的需要进行调整。

​

$(function()
    {
        $("#one").bind("taphold", function() { console.log("\ntap and hold on ONE"); });

        $("#two").on("taphold", function() { console.log("\ntap and hold on TWO"); });

        $("#three").on("taphold",
                       {clickHandler: function() { console.log("\nclick on THREE"); }},
                       function() { console.log("\ntap and hold on THREE"); });

        $("#four").on("taphold", function() { console.log("\ntap and hold on FOUR"); })
                  .on("click",   function() { console.log("\nclick on FOUR"); });

        $("#seven").on("taphold", {duration: 5000}, function() { console.log("\ntap and hold on SEVEN"); });
    });

.events div {
        width: 100px;
        height: 100px;
        margin: 20px;
        float: left;
        padding: 10px;
        font-weight: bold;
    }

    .events #one {
        background: #f00;
    }

    .events #two {
        background: #0f0;
    }

    .events #three {
        background: #000;
        color: #fff;
    }

    .events #four {
        background: #fff;
        color: #000;
        border: 1px solid #000;
    }

    .events #five {
        background: #dcda07;
        color: #000;
    }

    .events #six {
        background: #f10fff;
        color: #000;
    }

    .events #seven {
        background: #3cc9f4;
        color: #000;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// @author Rich Adams <rich@richadams.me>

// Implements a tap and hold functionality. If you click/tap and release, it will trigger a normal
// click event. But if you click/tap and hold for 1s (default), it will trigger a taphold event instead.

;(function($)
{
    // Default options
    var defaults = {
        duration: 1000, // ms
        clickHandler: null
    }

    // When start of a taphold event is triggered.
    function startHandler(event)
    {
        var $elem = jQuery(this);

        // Merge the defaults and any user defined settings.
        settings = jQuery.extend({}, defaults, event.data);

        // If object also has click handler, store it and unbind. Taphold will trigger the
        // click itself, rather than normal propagation.
        if (typeof $elem.data("events") != "undefined"
            && typeof $elem.data("events").click != "undefined")
        {
            // Find the one without a namespace defined.
            for (var c in $elem.data("events").click)
            {
                if ($elem.data("events").click[c].namespace == "")
                {
                    var handler = $elem.data("events").click[c].handler
                    $elem.data("taphold_click_handler", handler);
                    $elem.unbind("click", handler);
                    break;
                }
            }
        }
        // Otherwise, if a custom click handler was explicitly defined, then store it instead.
        else if (typeof settings.clickHandler == "function")
        {
            $elem.data("taphold_click_handler", settings.clickHandler);
        }

        // Reset the flags
        $elem.data("taphold_triggered", false); // If a hold was triggered
        $elem.data("taphold_clicked",   false); // If a click was triggered
        $elem.data("taphold_cancelled", false); // If event has been cancelled.

        // Set the timer for the hold event.
        $elem.data("taphold_timer",
            setTimeout(function()
            {
                // If event hasn't been cancelled/clicked already, then go ahead and trigger the hold.
                if (!$elem.data("taphold_cancelled")
                    && !$elem.data("taphold_clicked"))
                {
                    // Trigger the hold event, and set the flag to say it's been triggered.
                    $elem.trigger(jQuery.extend(event, jQuery.Event("taphold")));
                    $elem.data("taphold_triggered", true);
                }
            }, settings.duration));
    }

    // When user ends a tap or click, decide what we should do.
    function stopHandler(event)
    {
        var $elem = jQuery(this);

        // If taphold has been cancelled, then we're done.
        if ($elem.data("taphold_cancelled")) { return; }

        // Clear the hold timer. If it hasn't already triggered, then it's too late anyway.
        clearTimeout($elem.data("taphold_timer"));

        // If hold wasn't triggered and not already clicked, then was a click event.
        if (!$elem.data("taphold_triggered")
            && !$elem.data("taphold_clicked"))
        {
            // If click handler, trigger it.
            if (typeof $elem.data("taphold_click_handler") == "function")
            {
                $elem.data("taphold_click_handler")(jQuery.extend(event, jQuery.Event("click")));
            }

            // Set flag to say we've triggered the click event.
            $elem.data("taphold_clicked", true);
        }
    }

    // If a user prematurely leaves the boundary of the object we're working on.
    function leaveHandler(event)
    {
        // Cancel the event.
        $(this).data("taphold_cancelled", true);
    }

    // Determine if touch events are supported.
    var touchSupported = ("ontouchstart" in window) // Most browsers
                         || ("onmsgesturechange" in window); // Microsoft

    var taphold = $.event.special.taphold =
    {
        setup: function(data)
        {
            $(this).bind((touchSupported ? "touchstart"            : "mousedown"),  data, startHandler)
                   .bind((touchSupported ? "touchend"              : "mouseup"),    stopHandler)
                   .bind((touchSupported ? "touchmove touchcancel" : "mouseleave"), leaveHandler);
        },
        teardown: function(namespaces)
        {
            $(this).unbind((touchSupported ? "touchstart"            : "mousedown"),  startHandler)
                   .unbind((touchSupported ? "touchend"              : "mouseup"),    stopHandler)
                   .unbind((touchSupported ? "touchmove touchcancel" : "mouseleave"), leaveHandler);
        }
    };
})(jQuery);
</script>

<div class="events">
    <div id="one">ONE<br/><br/>tap-hold</div>
    <div id="two">TWO<br/><br/>tap-hold (alt)</div>
    <div id="three">THREE<br/><br/>tap-hold<br/>click</div>
    <div id="four">FOUR<br/><br/>tap-hold<br/>click (alt)</div>
    <div id="seven">SEVEN<br/><br/>5s<br/>tap-hold</div>
</div>

​