My Book

阻止事件冒泡

事件目标

事件处理程序中的变量event保存着事件对象,而event.target属性保存着发生事件的目标元素。这个属性DOM API中规定的,但没有被所有浏览器实现。而jquery中对这个事件进行了扩展,从而在任何浏览器中都能够使用这个属性。通过event.target属性可以确定DOM中首先接收到事件元素。。

    $(document).ready(function(){
        $("#switcher").click(function(event){
            if(event.target == this){
                $('#switcher .button').toggleClass('hidden');
            }
        })
    })

停止事件传播--event.stopPropagation()

javascript中提供该方法来阻止事件冒泡,但在跨域浏览器的环境中无法安全使用。不过,我们通过jquery来注册所有的事件处理程序,就可以放心使用该方法

    $(document).ready(function(){
        $("#switcher").click(function(event){
                $('#switcher .button').toggleClass('hidden');
            }
        })
    })
    $('#switcher .button').click(event){
        if(event&&event.stopPropagation){
            event.stopPropagation();
        }else {
            window.event.cancelBubble == true;
        }
    }

阻止默认操作---.preventDefault()

    $(document).ready(function(){
        $("#switcher").click(function(event){
                $('#switcher .button').toggleClass('hidden');
            }
        })
    })
    $('#switcher a').click(event){
        if(event.preventDefault){
            return event.preventDefault();
        }else {
            return window.event.returnValue === false;
        }
    }

同时调用两种方法,使用return false

    $(document).ready(function(){
        $("#switcher").click(function(event){
                $('#switcher .button').toggleClass('hidden');
            }
        })
    })
    $('#switcher a').click(){
        return false;
    }

关于三者之间的区别