如何使用 Javascript 检测触摸悬停？

Posted 2023-03-06

【中文标题】如何使用 Javascript 检测触摸悬停？

【英文标题】：how to detect touch hover with Javascript?

【发布时间】：2014-12-20 20:48:55

【问题描述】：

我正在开发的 javascript 插件有问题。这是一个轮播插件。问题是如何检测旋转木马何时被触摸一段时间；就像鼠标悬停一样。该问题伴随着“Uncaught TypeError: undefined is not a function”消息。http://jsfiddle.net/ospena/xDf4Z/20/

/*---------------------------------------------------------------------------------------------

@author       Oscar Peña - @os-pena
@link            ???
@github        https://github.com/os-pena/Elegant-jQuery-Carousel-Slider
@version     0.0.2
@license      ISC license
based on Simple-jQuery-Carousel-Slider : https://github.com/paulmason/Simple-jQuery-Carousel-Slider

----------------------------------------------------------------------------------------------*/


jQuery(function ($) 

    // settings
    var $slider = $('.slider'); // class or id of carousel slider
    var $slide = 'li'; // could also use 'img' if you're not using a li
    var $transition_time = 1000; // 1 second
    var $time_between_slides = 2300; // 2.3 seconds
    var $interval;

    function slides() 
        return $slider.find($slide);
    

    slides().fadeOut();

    // set active classes
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    // auto scroll 
    function startloop() 
        $interval = setInterval(

        function () 
            var $i = $slider.find($slide + '.active').index();

            slides().eq($i).removeClass('active');
            slides().eq($i).fadeOut($transition_time);

            if (slides().length == $i + 1) $i = -1; // loop to start

            slides().eq($i + 1).fadeIn($transition_time);
            slides().eq($i + 1).addClass('active');
        , $transition_time + $time_between_slides);
    
    function pauseLoop() 
        window.clearInterval($interval);
    

    $slider.hover(

    function () 
        pauseLoop(); // pause the loop
    ,

    function () 
        startloop(); //scroll()
    );

    $slide.addEventListener('touchstart', function(e)
    alert ('paused');
    e.preventDefault()
    , false);

    $slide.addEventListener('touchend', function(e)
    alert ('paused');
    startloop(); 
  e.preventDefault()
 , false)



    return startloop();
);

【问题讨论】：

这可以为您提供解决方案***.com/a/2891155/2043592

@xploshioOn 这个答案是用 javascript 和 css 完成的。我正在构建的插件功能仅在 javascript 中。

【参考方案1】：

试试taphold 事件。

$("div").on( "taphold", function (event)  ...  );

【讨论】：

您能否详细说明jsbin 或jsfiddle 中的代码。我尝试了此代码，但出现错误消息 "Uncaught TypeError: undefined is not a function" 。然后，：我添加了 jQuery 移动库 cnd 但什么也没添加。