开发者

jquery selector:parent problem

开发者 https://www.devze.com 2023-01-31 04:54 出处:网络
just a little help here for jquery selector.. the problem is when i click (\".x\"), the (\".bigCon\") will also trigger.. i just want that only the (\".bigcon\") will have the event of onclick then al

just a little help here for jquery selector.. the problem is when i click (".x"), the (".bigCon") will also trigger.. i just want that only the (".bigcon") will have the event of onclick then alert("black").. sorry for a bit confusing.. :D

<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script>
        $(document).ready(function(){
           $(".x").click(function(){
                $(".evClick").removeClass("evClick").addClass("sample");
                $(this).addClass("evClick");
           }).mouseover(function(){
                $(this).toggleClass("evHover");
           }).mouseout(function(){
                $(this).toggleClass("evHover");
           });

           $(".bigCon").click(function(){
                alert("black");
           });
        });
    </script>
    <style>
        .x {
            width:100px;
            height:100px;
            margin:10px;
        } 

        .bigCon {
            background:black;
            width:开发者_StackOverflow240px;
            height:540px;
        }

        .sample {background:red;}            
        .evHover {background:green;}            
        .evClick {background:yellow;}

    </style>
</head>
<body>
    <div class="bigCon">
        <div class="sample x"></div>
        <div class="sample x"></div>
        <div class="sample x"></div>
        <div class="sample x"></div>
        <div class="sample x"></div>
    </div>        
</body>
</html>


Look into event.stopPropagation(). You'd use it like this:

$(".x").click( function(e){
  e.stopPropagation();
  your_click_actions_here();
  // etc
})

Click events on .x will fire, but will not bubble up the DOM tree to enclosing elements, like div.bigCon.

0

精彩评论

暂无评论...
验证码 换一张
取 消