click事件冲突,如何解决?
下面的select_items()让点击目标添加“.selected”css属性,如果遇到a或button取消他们的默认动作。
但这样和hotkeys_condition()冲突,点击<a href="#">page a 1</a>时无法执行alert(1);
如何解决冲突?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function select_items(){
$(".page *").click(function(e){
if($(".selected")[0]){
if($.trim($(".selected")[0].className)=="selected"){
$(".selected").removeAttr("class");
}else{
$(".selected").removeClass("selected");
}
}
$(e.target).addClass("selected");
return false; // 不让点击a 或button 执行默认动作,
//但这样和hotkeys_condition()中的点击.page a冲突,无法执alert(1);
});
}
$(function(){
select_items();
});

var hk=0;
var hk_old=0;
function hotkeys_condition(){
var hotkey_if_obj={
".framework_right *" : 0,
".framework_hidden *" : 0,
".page *" : 1,
".follow_info" : 1,
".color_items" : 1
}
$.each(hotkey_if_obj,function(i,n){
$(i).live("click",function(){
hk_old=hk;
hk=n;
switch((hk-hk_old)){
case -1 : alert(-1); break;
case 0 : alert(0); break;
case 1 : alert(1); break;
}
})
});
}
$(function(){
hotkeys_condition();
});
</script>
<div class="framework_right">
<span>.framework_right   0</span>
</div>
<div class="framework_hidden">
<span>.framework_hidden   0</span>
</div>
<div class="page">
<span>page  1</span>
<a href="#">page a 1</a>
</div>
<div class="follow_info">
follow_info   1
</div>
<div class="color_items">
color_items   1
</div>

解决方案 »

  1.   

    click用live方式可以吗?<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        function select_items(){
            $(".page *").live("click",function(e){
                if($(".selected")[0]){
                    if($.trim($(".selected")[0].className)=="selected"){
                        $(".selected").removeAttr("class");
                    }else{
                        $(".selected").removeClass("selected");
                    }
                }
                $(e.target).addClass("selected");
             return false;
            });
        }
        var hk=0;
        var hk_old=0;
        function hotkeys_condition(){
            var hotkey_if_obj={
                ".framework_right *"        :    0,
                ".framework_hidden *"        :    0,
                ".page *"                    :    1,
                ".follow_info"                :    1,
                ".color_items"                :    1
            }
            $.each(hotkey_if_obj,function(i,n){
                $(i).live("click",function(){
                    hk_old=hk;
                    hk=n;
                    switch((hk-hk_old)){
                        case -1    :    alert(-1); break;
                        case 0    :    alert(0); break;
                        case 1    :    alert(1); break;
                    }
                })
            });
        }
        $(function(){
            hotkeys_condition();
            select_items();
        });
    </script>
    <div class="framework_right">
        <span>.framework_right   0</span>
    </div>
    <div class="framework_hidden">
        <span>.framework_hidden   0</span>
    </div>
    <div class="page">
        <span>page  1</span>
        <a href="#">page a 1</a>
    </div>
    <div class="follow_info">
        follow_info   1
    </div>
    <div class="color_items">
        color_items   1
    </div>
      

  2.   

    谢谢hookee哥,用live也不行,最后是将
     return false;
    改为
    e.preventDefault();
    就可以。
    是经典论坛的一位高手 jiangliuhuo 帮忙解决的。
    http://bbs.blueidea.com/thread-2978267-1-1.html

      

  3.   

    我测下来是可以的,不过前提是事件加载的顺序。用cancelBuble的确是最终方法.
      

  4.   

    原来加载顺序换一下用live也可以,谢谢。
    没见过cancelBuble,查了一下,是指“如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。”
    尝试将 return false;
    改为 e.cancelBuble=true;
    可以alert(1),但却让a链接跳转,和我想的效果不相符。
      

  5.   

    e.preventDefault();防止默认提交?不错的主意