mousemove बंद होने पर कैसे पता लगाया जाए

Question

किसी ईवेंट के साथ पता लगाना संभव है जब mousemove समाप्त हो गया है?

document.AddEventListener('mousemove', startInteractionTimer, false); 

function startInteractionTimer(){ 
    clearInterval(touchInterval); 
    touchInterval = setInterval(noAction, 6000); 
} 

मैं तुरंत समारोह startInteractionTimer शुरू करने के लिए के बाद MouseMove समाप्त हो गया है और मुझे लगता है कि पकड़ने के लिए चाहते हैं चाहते हैं। उपरोक्त कोड उदाहरण पर, माउस शुरू हो जाने पर यह शुरू हो रहा है।

धन्यवाद

संपादित करें: ठीक है, मैं अपने खुद के सवाल और ऊपर स्क्रिप्ट जवाब -^बस ठीक है।

Answer 1

तुम हमेशा इसके लिए एक कस्टम घटना बना सकता है सिर्फ इस कार्य करें:

$('#my-el').on('mousemoveend', function() { 
    ... 
}); 

संपादित करें:

साथ ही, अन्य jQuery की घटनाओं के साथ स्थिरता के लिए:

(function ($) { 
    $.fn.mousemoveend = function (cb) { 
     return this.on('mousemoveend', cb); 
    }); 
}(jQuery)); 

अब आप:

$('#my-el').mousemoveend(fn); 

Answer 2

आप की स्थापना/समय समाप्त पूरी तरह समाशोधन माउस को ले के अंत का पता लगाने की कोशिश कर सकते ...

var x; 
document.addEventListener('mousemove', function() { 
    if (x) clearTimeout(x); 
    x = setTimeout(startInteractionTimer, 200); 
}, false); 

तुम कब तक इंतजार करना चाहते हैं आप पर निर्भर है। मैं नहीं जानता कि तुम कितनी देर तक कहते हैं "एक MouseMove के अंत" है चाहता हूँ

उदाहरण:

(function ($) { 
    var timeout; 
    $(document).on('mousemove', function (event) { 
     if (timeout !== undefined) { 
      window.clearTimeout(timeout); 
     } 
     timeout = window.setTimeout(function() { 
      // trigger the new event on event.target, so that it can bubble appropriately 
      $(event.target).trigger('mousemoveend'); 
     }, 100); 
    }); 
}(jQuery)); 

अब आप कर सकते हैं: http://jsfiddle.net/jeffshaver/ZjHD6/

Answer 3

यहाँ एक और कस्टम-ईवेंट समाधान है, लेकिन jQuery के बिना। यह mousestop नामक एक ईवेंट बनाता है जो माउस पॉइंटर पर मौजूद तत्व पर ट्रिगर किया जाएगा। यह अन्य माउस घटनाओं की तरह बुलबुला होगा।

तो एक बार आप कोड के उस टुकड़े शामिल है, तो आप addEventListener('mousestop', fn) साथ किसी भी तत्व ऐसे ईवेंट श्रोता जोड़ सकें:

(function (mouseStopDelay) { 
 
    var timeout; 
 
    document.addEventListener('mousemove', function (e) { 
 
     clearTimeout(timeout); 
 
     timeout = setTimeout(function() { 
 
      var event = new CustomEvent("mousestop", { 
 
       detail: { 
 
        clientX: e.clientX, 
 
        clientY: e.clientY 
 
       }, 
 
       bubbles: true, 
 
       cancelable: true 
 
      }); 
 
      e.target.dispatchEvent(event); 
 
     }, mouseStopDelay); 
 
    }); 
 
}(1000)); 
 

 
// Example use 
 
document.getElementById('link').addEventListener('mousestop', function(e) { 
 
    console.log('You stopped your mouse while on the link'); 
 
    console.log('Mouse coordinates are: ', e.detail.clientX, e.detail.clientY); 
 
    // The event will bubble up to parent elements. 
 
});

<h1>Title</h1> 
 
<div> 
 
    content content<br> 
 
    <a id="link" href="#">stop your mouse over this link for 1 second</a><br> 
 
    content content content 
 
</div>