ड्रॉपडाउन जावास्क्रिप्ट त्रुटि: ऑब्जेक्ट संपत्ति या विधि 'मैचों' का समर्थन नहीं करता

Question

मैं निम्न जावास्क्रिप्ट ड्रॉपडाउन का उपयोग कर रहा हूं, जो कि नए विंडोज एज को छोड़कर सभी ब्रॉवर्स में सही काम करता है।

यह इस त्रुटि प्रदर्शित करता है:

SCRIPT438: Object doesn't support property or method 'matches'

स्क्रिप्ट: http://www.w3schools.com/howto/howto_js_dropdown.asp जो मैं सभी प्लेटफार्मों के साथ संगत होना मान लिया था:

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown menu if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 

से स्क्रिप्ट मिल गया। अब मैं इसे पहले से ही लागू कर चुका हूं, और एज में समस्याओं में भाग गया।

Answer 1

ऐसा लगता है कि आप यह देखने की कोशिश करते हैं कि क्लास ड्रॉपबटन के साथ किसी ऑब्जेक्ट द्वारा क्लिक ईवेंट ट्रिगर किया गया था या नहीं।

आप jQuery का उपयोग करते हैं तो आप इस तरह एक ही कर सकते हैं:

function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown menu if the user clicks outside of it 
window.onclick = function(event) { 
    if (!$(event.target).hasClass('dropbtn')) { 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 

आप jQuery का उपयोग नहीं करते आप className प्राप्त कर सकते हैं और उसके बाद जाँच लें कि dropbtn उनमें से एक है।

function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown menu if the user clicks outside of it 
window.onclick = function(event) { 
    var classes = event.target.className.split(' '); 
    var found = false; var i = 0; 
    while (i < classes.length && !found) { 
     if (classes[i]=='dropbtn') found = true; 
     else ++i; 
    } 
    if (!found) { 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 

Answer 2

http://caniuse.com/#search=matches के अनुसार EDGE के उपसर्ग 'एमएस' के साथ आंशिक समर्थन है।

Answer 3

एक क्रॉस-ब्राउज़र समाधान के लिए, http://youmightnotneedjquery.com/#matches_selector

var matches = function(el, selector) { 
    return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector); 
}; 

matches(el, '.my-class');