JQuery में, मैं प्रोग्रामेटिक और उपयोगकर्ता क्लिक के बीच कैसे बता सकता हूं?


91

कहो कि मेरे पास एक क्लिक हैंडलर परिभाषित है:

$("#foo").click(function(e){

});

मैं, फंक्शन हैंडलर के भीतर कैसे बता सकता हूं कि क्या कार्यक्रम को प्रोग्राम द्वारा या उपयोगकर्ता द्वारा निकाल दिया गया था?


प्रोग्राम को प्रोग्रामेटिक रूप से फायर करने के बारे में प्रोग्राम कैसे जाता है?
क्लेटन

5
आपको मामलों को अलग करने की आवश्यकता क्यों है?
डेमियन___बेलिवर्स

@ क्लेटन: $x.click()या $x.trigger('click')
म्यू बहुत कम है

मेरे पास एक छवि-स्लाइडर के साथ एक स्थिति थी जो स्वचालित रूप से छवियों के माध्यम से स्क्रॉल करती थी, और छवि से जुड़े सही नौसेना आइटम पर क्लिकों को ट्रिगर करके ऐसा करती थी। परेशानी यह है कि जब उपयोगकर्ता नौसेना पर क्लिक करता है, तो स्वचालित रोटेशन बंद हो जाना चाहिए।
कसापो

2
यह नवीनतम फ़ायरफ़ॉक्स, क्रोम और IE9 में काम करता है। उच्चतम मतों के साथ नीचे दिए गए उत्तर को स्वीकार क्यों नहीं करते ?? @kevino
OZZIE

जवाबों:


119

आप ईवेंट ऑब्जेक्ट पर एक नज़र डाल सकते हैं e। यदि घटना एक असली क्लिक से शुरू हो रहा था, तो आप चीजों की तरह होगा clientX, clientY, pageX, pageY, आदि के अंदर eऔर वे संख्या हो जाएगा; ये संख्याएँ माउस की स्थिति से संबंधित होती हैं, जब क्लिक चालू हो जाता है, लेकिन वे संभवत: तब भी मौजूद रहेंगे, जब कीबोर्ड के माध्यम से क्लिक शुरू किया गया था। यदि घटना तब तक चालू हो जाती है $x.click()तो आपके पास सामान्य स्थिति मान नहीं होंगे e। आप originalEventप्रॉपर्टी को भी देख सकते हैं , अगर इवेंट से आया है तो यह नहीं होना चाहिए $x.click()

शायद कुछ इस तरह:

$("#foo").click(function(e){
    if(e.hasOwnProperty('originalEvent'))
        // Probably a real click.
    else
        // Probably a fake click.
});

और यहाँ थोड़ा सैंडबॉक्स खेलने के लिए है: http://jsfiddle.net/UtzND/


4
यह कमाल है ... मैं सिर्फ अपने आप को "शायद jQuery ट्रिगर घटनाओं माउस स्थिति की जानकारी नहीं है" सोचा था! w00t!
कासापो

2
इसे उन ब्राउज़र में हराया जा सकता है जो createEvent का समर्थन करते हैं। jsfiddle.net/UtzND/26
जो एंज़िंगर

2
@JoeEnzminger हाँ, लेकिन आप बोलने के लिए अपनी खुद की स्क्रिप्ट को क्यों हराएंगे ...?
OZZIE

3
मैं एक थर्ड पार्टी स्क्रिप्ट के बारे में चिंतित हूँ जो एक क्लिक ईवेंट जनरेट करता है और मेरी स्क्रिप्ट यह मान कर चलती है कि यह उपयोगकर्ता द्वारा तैयार किया गया था (एक वास्तविक क्लिक)।
जो एन्ज़मिंगर

2
@JoeEnzminger: ब्राउज़र में आपका कोड होते ही सभी दांव बंद हो जाते हैं, ऐसा कुछ भी नहीं है जो आप कर सकते हैं जो एक पर्याप्त चतुर व्यक्ति द्वारा हराया नहीं जा सकता है। मुझे लगता है कि आप सबसे अच्छा कर सकते हैं चीजों की एक गुच्छा की जाँच करें: वहाँ एक है originalEvent? क्या यह सही बात है? कहीं भी निर्देशांक हैं? निर्देशांक सुसंगत हैं? क्या अंदर निर्देशांक हैं #foo? ...
म्यू बहुत कम है

44

आप एक अतिरिक्त पैरामीटर का उपयोग कर सकते हैं जैसा कि jQuery ट्रिगर मैनुअल में कहा गया है :

$("#foo").click(function(e, from){
    if (from == null)
        from = 'User';
    // rest of your code
});

$('#foo').trigger('click', ['Trigger']);

3
समस्या सिर्फ मैं इस के साथ देखते हैं कि आप एक सामान्य क्लिक करें और के बीच भेद नहीं कर सकते हैं $x.click(), .click()फोन करने वाले को स्पष्ट रूप से बताने के लिए है कि वे यह faking रहे है। यह केविन ओवेकी के ऊपर निर्भर करता है या नहीं हो सकता है।
म्यू बहुत कम है

1
@ एमयू: मैं एक "सामान्य" क्लिक (उपयोगकर्ता?) और $x.click()जो कि इवेंटहैंडलर (उपयोगकर्ता क्लिक के लिए, जो "सामान्य" हो सकता है ) के बीच के अंतर को काफी नहीं समझता
Shikiryu

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

यद्यपि म्यू सही है और यह हर स्थिति में काम नहीं करेगा, यह वही था जो मैं देख रहा था, धन्यवाद! मुझे नहीं पता था कि मैं एक var की तरह अतिरिक्त पैरामीटर पास कर सकता हूं, लेकिन यह वही है जो मुझे एक जटिल UI में "वास्तविक" क्लिक के लिए परीक्षण करने की आवश्यकता थी जो प्रोग्रामिक के रूप में कुछ "वास्तविक" क्लिक को मानता है। दोनों अविश्वसनीय रूप से उपयोगी समाधान के लिए धन्यवाद!
फिल

9

पहले से ही एक और सवाल का जवाब है।

कैसे पता लगाया जाए कि क्या एक क्लिक () एक माउस क्लिक है या कुछ कोड द्वारा ट्रिगर किया गया है?

whichइवेंट ऑब्जेक्ट की संपत्ति का उपयोग करें । यह undefinedकोड-ट्रिगर घटनाओं के लिए होना चाहिए

$("#someElem").click(function(e) {
    if (e.which) {
        // Actually clicked
    } else {
        // Triggered by code
    }
});

JsFiddle उदाहरण - http://jsfiddle.net/interdream/frw8j/

आशा करता हूँ की ये काम करेगा!


2
हमेशा काम नहीं करता है। उदाहरण के लिए एक वास्तविक घटना के लिए एक भी selectदेना होगा e.which==undefined
जेएनएफ

5

मैंने उपरोक्त सभी समाधानों की कोशिश की है। मेरे मामले में सुखद काम किया गया है। नीचे समाधान मेरे लिए काम किया। आशा है कि यह आपकी मदद करेगा।

$(document).ready(function(){
  //calling click event programmatically
    $("#chk1").trigger("click");
});

$(document).on('click','input[type=checkbox]',function(e) {
		if(e.originalEvent.isTrusted==true){
			alert("human click");
		}
		else{
			alert("programmatically click");
		}
    
    });
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">
</script>

<input type="checkbox" id="chk1" name="chk1" >Chk1</input>
<input type="checkbox" id="chk2" name="chk2" >Chk2</input>
<input type="checkbox" id="chk3" name="chk3" >Chk3</input>


4

DOM स्तर 3 Event.isTrusted निर्दिष्ट करता है। यह केवल वर्तमान में IE9 + और फ़ायरफ़ॉक्स में समर्थित है (मेरे परीक्षणों के आधार पर। मैंने यह भी पढ़ा है (हालांकि पूरी तरह से शोध नहीं किया गया है) कि इसे कुछ ब्राउज़रों में ओवरराइड किया जा सकता है और शायद अभी तक 100% वास्तव में भरोसेमंद (दुर्भाग्य से) तैयार नहीं है।

यह @ म्यू के फिडेल का संशोधित संस्करण है जो IE और फ़ायरफ़ॉक्स पर काम करता है।


अच्छी बात। मुझे नहीं लगता कि कुछ भी 100% ठोस होने जा रहा है। आपको यह देखने के लिए कि isTrustedक्या समर्थित नहीं है और देखने योग्य नहीं है , आपको कुछ परीक्षणों में मिश्रण करना होगा । मुझे लगता है कि असली जवाब इस सवाल के पीछे के कारण पर निर्भर करता है और हमने कभी भी इसका पता नहीं लगाया।
mu

@mu, मैं एक समान, लेकिन सामान्य रूप से पूछने के बाद इस सवाल पर आया था। मेरा "क्यों" मामला यह है कि मैं यह सुनिश्चित करना चाहता हूं कि मैं केवल एक कार्रवाई कर रहा हूं (एक वित्तीय लेनदेन, भले ही एक छोटा सा) यदि उपयोगकर्ता ने पृष्ठ पर प्रत्यक्ष सकारात्मक कार्रवाई की।
जो एनजमिंगर

1

वेनिला जे एस समाधान:

document.querySelector('button').addEventListener('click', function (e){
    if(e.isTrusted){
        // real click.
    }else{
        // programmatic click
    }
});

-1

बौद्धिक चर्चा में भाग लेने के लिए नहीं, जो कोड मेरे लिए फ़िल्टर करने का काम करता है .click()और .trigger('click')है-

$(document).on('click touchstart', '#my_target', function(e) {
    if (e.pageX && e.pageY) { // To check if it is not triggered by .click() or .trigger('click')
        //Then code goes here
    }
});
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.