0

演示

我编写了一个简短的脚本，它获取鼠标单击的 pagex 和 pageY 坐标并将它们附加到列表中。除了应该清除列表的按钮之外的所有功能（即使按下清除按钮也会发生点击，但这不是问题）

无论如何，我在 jsfiddle 中更正了一些工作，并且在那里一切正常，但是当我在记事本 ++ 中进行相同的更正时，按钮根本不起作用。IE 它不会清除列表，但是当我单击 jsfiddle 中的相同按钮时，它可以正常工作。已经在 Mozilla Chrome 和 IE 上测试过

         <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title> Click Away</title>
    <link href="stylesheets/site.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>


        $(document).click(function(e){
            $("#coordList").append("<li>"+ "pageX: " + e.pageX + ",    pageY: " + e.pageY +"</li>"); 
        });

        $("#clear").click(function() {
            $("#coordList").empty();
        });
    </script>
</head>
<body>
    <div id="wrapper">
        <header>
            <h1> Coordinates </h1>
        </header>
        <button id="clear"> Clear list </button>
        <div id="list"> 
            <ol id="coordList"></ol>
              </div>
            </div>
              </body>
                  </html>
4

1 回答 1

1

我五分钟前才学会这个。event.stopPropagation();阻止事件触发其父事件，包括body元素。像这样：

$("#clear").click(function (event) {
  event.stopPropagation();
  $("#coordList").empty();
});

演示

于 2013-10-19T01:13:37.927 回答