单击 div2 如何显示消息 jquery

Question

在下面的例子中单击 div2 仅显示 div2 的消息，不显示 div1 的消息？这需要....如何做到这一点...我希望得到解决方案...感激不尽在下面的例子中单击 div2 仅显示 div2 的消息，不显示 div1 的消息？这需要....如何做到这一点...我希望得到解决方案...感激不尽

<!DOCTYPE html >
<html>
<head>
    <script src="javas/jquery-1.12.2.min.js" type="text/javascript"></script>  
    <title>click on div2 jquery </title>
    <script type="text/javascript">
        $('document').ready(function () {
            $('#div1').click(function () {
                alert("div1");
            });

            $('#div2').click(function () {
                alert("div2");
            });
        });
    </script>
    <style type="text/css">
        #div1
        {
            position: absolute;
            height: 147px;
            width: 336px;
            right: 38%;
            top: 49px;
            border-radius: 10px;
           border: medium solid #FF0000;               
        }
        #div2
        {
            position: absolute;
            height: 58px;
            width: 175px;
            right: 27%;
            top: 42px;
            border-radius: 10px;
            border: medium solid #0000FF;
            text-align: center;
            font-weight: 700;
        }
    </style>
</head>
<body>
 <div id="div1">
        <div id="div2">
             click on div2 jquery
        </div>
    </div>
</body>
</html>

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html >
<html>
<head>
    <script src="javas/jquery-1.12.2.min.js" type="text/javascript"></script>  
    <title>click on div2 jquery </title>
    <script type="text/javascript">
        $('document').ready(function () {




            $('#div1').click(function () {
                alert("div1");



            });


            $('#div2').click(function (event) {
              event.stopPropagation();
                alert("div2");



            });

        });
    </script>
    <style type="text/css">


        #div1
        {
            position: absolute;
            height: 147px;
            width: 336px;
            right: 38%;
            top: 49px;
            border-radius: 10px;
           border: medium solid #FF0000;
           
        }

               #div2
        {
            position: absolute;
            height: 58px;
            width: 175px;
            right: 27%;
            top: 42px;
            border-radius: 10px;
            border: medium solid #0000FF;
            text-align: center;
            font-weight: 700;
                }


    </style>
</head>
<body>

        <div id="div1">

        <div id="div2">
             click on div2 jquery
        </div>
         </div>

</body>
</html>

Answer 2

当您希望函数停止时，只需 return false，这样它就不会将事件传播给父级。也可以尝试使用 console.info();打开您的 firebug 控制台，然后单击 div，然后您将在控制台中看到蓝色消息，比 alert();

好多了

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html >
<html>
    <head>
        <script src="javas/jquery-1.12.2.min.js" type="text/javascript"></script>  
        <title>click on div2 jquery </title>
        <script type="text/javascript">
            $('document').ready(function () {

                $('#div1').click(function () {
                    console.info('Div 1 clicked');
                });

                $('#div2').click(function (event) {
                    console.info('Div 2 clicked');
                    return false;
                });

            });
        </script>
        <style type="text/css">
            #div1
            {
                position: absolute;
                height: 147px;
                width: 336px;
                right: 38%;
                top: 49px;
                border-radius: 10px;
                border: medium solid #FF0000;

            }
            #div2
            {
                position: absolute;
                height: 58px;
                width: 175px;
                right: 27%;
                top: 42px;
                border-radius: 10px;
                border: medium solid #0000FF;
                text-align: center;
                font-weight: 700;
            }
        </style>
    </head>
    <body>

        <div id="div1">

            <div id="div2">
                click on div2 jquery
            </div>
        </div>

    </body>
</html>

单击 div2 如何显示消息 jquery

How can on click div2 show a message jquery

jquery

css

onclick

divide