एक बार mousemove पूर्ण होने के बाद माउसअप को आग लगाना कैसे

Question

ऐसा लगता है कि माउसअप ईवेंट केवल तभी निकाल दिए जाते हैं जब वे एक मूसमॉव के साथ नहीं होते हैं। दूसरे शब्दों में, बाएं माउस बटन पर दबाएं और चलो, और माउसअप निकाल दिया गया है। लेकिन अगर आप छवि में खींचते हैं और फिर जाने देते हैं, तो माउसअप को निकाल दिया नहीं जाता है। यहां एक उदाहरण दिया गया है जो इस व्यवहार को दिखाता है:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<div id="Out"> 
    <img id="Img" src="http://sstatic.net/so/img/logo.png" width=500> 
</div> 
<script language=JavaScript> 
    $(function() { 
     $(document).bind("mouseup",function() {alert("UP");}); 
     //$("#Out").bind("mouseup",function() {alert("UP");}); 
     //$("#Img").bind("mouseup",function() {alert("UP");}); 
    }); 
</script> 

यदि आप इसे लोड करते हैं, और क्लिक करें और जाने दें, तो "यूपी" सतर्क होगा। हालांकि, यदि आप खींचते हैं और फिर जाने देते हैं, तो यूपी को निकाल दिया नहीं जाता है।

mousemove पूरा होने पर माउसअप आग कैसे हो सकती है, या यह निर्धारित करने के लिए कि माउस बटन अब बंद हो गया है, मैं कैसे mousemove घटना का निरीक्षण कर सकता हूं?

Answer 1

यह एक पैटर्न है जिसका उपयोग मैं बहुत का उपयोग करता हूं, आमतौर पर mousemove से संबंधित सभी चीजों पर बहुत अच्छी तरह से काम करता है। जब माउस उपयोगकर्ता mousedown पर क्लिक करता है तो माउसअप ईवेंट बाध्य होता है, जब उपयोगकर्ता माउस बटन को जाने देता है, इससे कोई फर्क नहीं पड़ता कि इससे कितना स्थानांतरित हो जाता है।

$('#element').mousedown(function(e) { 

    // You can record the starting position with 
    var start_x = e.pageX; 
    var start_y = e.pageY; 

    $().mousemove(function(e) { 
     // And you can get the distance moved by 
     var offset_x = e.pageX - start_x; 
     var offset_y = e.pageY - start_y; 

     return false; 
    }); 

    $().one('mouseup', function() { 
     alert("This will show after mousemove and mouse released."); 
     $().unbind(); 
    }); 

    // Using return false prevents browser's default, 
    // often unwanted mousemove actions (drag & drop) 
    return false; 
}); 

Answer 2

JQuery 1.4 के रूप में आपको $() के लिए $ ('दस्तावेज़') को प्रतिस्थापित करने की आवश्यकता है। असल में, मैं इसका उपयोग JQuery UI संवाद के अंदर मेनू बनाने के लिए कर रहा हूं, जो कि mousemove घटनाओं को जाल में प्रतीत होता है। तो मैं बस $() के लिए अपने कंटेनर div को प्रतिस्थापित करता हूं (जो $ ('# myContainerDiv') जैसा दिखता है)। यह भी ठीक काम करता प्रतीत होता है।

Answer 3

अपने घटनाओं नाम स्थान के लिए मत भूलना अन्यथा सभी ईवेंट हैंडलर्स अनबाउंड हो जाएगा:

$('#element').bind('mousedown.namespace', function(e) { 
    $(document).one('mouseup', function() { 
     callback_func(); 
     $(document).unbind('mousedown.namespace'); 
    }); 
}); 

Answer 4

मैंने पाया कि जब मैं सीएसएस नीचे का उपयोग कर unselectable के रूप में मेरे पाठ निर्धारित करते हैं, mouseup घटना के रूप में रोके जाने पर अच्छा - शायद यह किसी और की मदद करेगा।

-moz-user-select: none; 
-khtml-user-select: none; 
user-select: none; 

Answer 5

मुझे KineticJS ऑब्जेक्ट्स के साथ एक समान समस्या थी। mouseup के बजाय कीनेटिक के dragend का उपयोग समस्या हल हो गई।

Answer 6

मैं एक ऐसी ही समस्या थी और यह मेरे लिए काम किया:

$(document).on("dragend", function(e){ 
    $(e.target).trigger("mouseup"); 
    e.preventDefault(); 
}); 

Answer 7

मैं एक ही समस्या आई थी। Mousedown हैंडलर में e.preventDefault() जोड़ने के बाद भी, यह अभी भी हल नहीं हुआ है।

अंत में, मुझे लगता है कि अगर मैं अपने mousemove हैंडलर में निम्नलिखित कोड बंद करता हूं, तो मेरे माउसअप हैंडलर को सामान्य रूप से कहा जाता है।

 mouseDragArea.css({ 
     top: dragAreaPos.y + 'px', 
     left: dragAreaPos.x + 'px', 
     width: Math.abs(mouseCurPos.x - mouseClickPos.x) + 'px', 
     height: Math.abs(mouseCurPos.y - mouseClickPos.y) + 'px' 
    }); 

mouseDragArea एक प्रोग्राम के द्वारा बनाई गई तत्व है, जो आयताकार क्षेत्र दिखाने के लिए एक बिंदीदार सीमा है माउस द्वारा क्लिक करें-घसीटा है:

mouseDragArea = $('<div id="mouse-drag-area"></div>'); 

फिर, मैंने महसूस किया है कि इस #mouse-drag-area तत्व से ऊपर है मूल तत्व जो माउसअप ईवेंट को संभालता है। तो #mouse-drag-area के लिए निम्न सीएसएस घोषणा जोड़ने के बाद, यह क्रमित है:

pointer-events:none; 

एक और शब्द में, जड़ जो तत्व आप के लिए अपने mouseup हैंडलर सेट कर रहे हैं के बारे में है।