क्षमा करें यदि यह एक बार-बार किया गया प्रश्न है, लेकिन मुझे कोई उत्तर नहीं मिला।

असल में, मैं एक वेब ऐप विकसित कर रहा हूं जिसमें इसमें एक बटन है।

मैं चाहता हूं कि वह बटन दो अलग-अलग परिदृश्यों में हाइलाइट हो:

-यदि उपयोगकर्ता नॉन-टच (डेस्कटॉप) डिवाइस पर है, तो माउस के शीर्ष पर होने पर बटन हाइलाइट हो जाएगा और ऐसा नहीं होने पर वापस सामान्य हो जाएगा।

-यदि उपयोगकर्ता बिना माउस के टच डिवाइस पर है, तो बटन को छूने पर हाइलाइट हो जाएगा और टच होने पर वापस सामान्य हो जाएगा।

डेस्कटॉप भाग ठीक काम कर रहा है, लेकिन स्पर्श भाग में एक समस्या है: बटन को वापस सामान्य करने के लिए, मुझे इसे क्लिक करने के बाद कहीं और क्लिक करना होगा, बस स्क्रीन को छूने से काम नहीं चलेगा।

मैं क्या गलत कर रहा हूँ? धन्यवाद!

जेएस कोड:

if (!this.isTouch) {
  document.getElementById("search_button").addEventListener("mouseover", function () {
    highlightButton();
  });
  document.getElementById("search_button").addEventListener("mouseout", function() {
    restoreButton();
  });
}
else if (window.matchMedia("(any-pointer: none)").matches) {
  document.getElementById("search_button").addEventListener("touchstart", function () {
    highlightButton();
    });
  document.getElementById("search_button").addEventListener("touchend", function () {
      restoreButton();
    });
}
1
Marcos 1 सितंबर 2021, 08:43

2 जवाब

सबसे बढ़िया उत्तर

कई स्पर्श ईवेंट भी सूचीबद्ध हैं जो आपके लिए उपयोगी हो सकते हैं, यह टैबलेट और फ़ोन जैसे स्पर्श उपकरणों का विस्तार करता है:

  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchmove", handleMove, false);

MDN डॉक्स पर और पढ़ें

0
kr4bz 1 सितंबर 2021, 06:46

touchcancel ईवेंट को भी संयोजित करने का प्रयास करें:

  addEventListener( "touchcancel", function ( event ) {
      console.log( "BREAK" );
      restoreButton();
    }, false );
0
Nikola Lukic 1 सितंबर 2021, 05:52