兼容瀏覽器的點擊事件


 IE和其他瀏覽器在一些方法上存在差異:

1.獲取事件,IE通過window.event

2.獲取觸發事件的節點   W3C標准: e.target  

           IE: e.srcElement;

3.阻止冒泡  W3C標准:stopPropagation()

      IE中: cancelBubble = true;

4.阻止默認操作  W3C標准: preventDefault()

        IE中: returnValue = false;

5.事件監聽  W3C標准: document.addEventListener('click', func, false)

       IE中: document.attachEvent('click', func)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="clickme">Click me: 9</button>
        <script>
        function myHandler(e) {
            var src, parts;

            // 獲取事件和觸發事件的節點
            e = e || window.event;
            target = e.target || e.srcElement;

            // 實際工作
            parts = target.innerHTML.split(": ");
            parts[1] = parseInt(parts[1], 10)+1;
            target.innerHTML = parts[0] + ": " + parts[1];

            // 阻止冒泡
            if (typeof e.stopPropagation === "function") {
                e.stopPropagation();
            }
            if (typeof e.cancelBubble !== "undefined") {
                e.cancelBubble = true;
            }

            //阻止默認操作
            if (typeof e.preventDefault === "function") {
                e.preventDefault();
            }
            if (typeof e.returnValue !== "undefined") {
                e.returnValue = false;
            }
        }

        var clickMe = document.getElementById('clickme');
        if (document.addEventListener) { // 一般瀏覽器
            clickMe.addEventListener('click', myHandler, false);
        } else if (document.attachEvent) { // IE
            clickMe.attach('click',myHandler);
        } else { // last resort
            clickMe.onclick = myHandler;
        }
    </script>
</body>
</html>

運行效果(每次值加1)

 .......

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM