js 第34章 jQuery区分鼠标单双击事件

2022-07-18

①、介绍

区别鼠标单击双击事件

②、演示(点击)

③、代码(点击)

<!DOCTYPE html>
<html>
<head>
    <title>Jquery区分鼠标单双击事件插件</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="common.css" media="screen" />
    <style type="text/css">
        .out_box{width:70%;min-width:700px;border-left:1px solid white;border-right:1px solid white;margin:0px auto;}
        .in_box{min-height:550px; _height:550px; border-left:1px solid #ccc; border-right:1px solid #ccc; background:white; padding:1em 2.5em 0;}
        .title{font-size:1.6em; text-align:center; margin:20px 0;}
        #div1{ width:100px; height:100px; margin:5px; border:2px solid #0000FF;position:relative;color:#FF0000;}
    </style>
</head>
<body>
    <div class="out_box">
        <h1 class="title">Jquery区分鼠标单双击事件插件</h1>
        <div class="in_box">
            <div id="div1">使用了插件同时绑定的单双击事件</div>
            <span id="result" style="color:#0000FF"></span>
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
    <script src="oneDblClick.js"></script>
    <script type="text/javascript">
    $(function(){
        var click_event = function(e){
            $("#result").append("您<b>单击</b>了我<br>");
            alert("您单击的是"+e.target.tagName);
        };
        var dblclick_event = function(e){
            $("#result").append("您<b>双击</b>了我<br>");
            alert("您双击的是"+e.target.tagName);
        }
        $("#div1").oneDblClick({oneclick:click_event,dblclick:dblclick_event});
    });
    </script>
</body>
</html>


阅读 124

js文章

带到手机上看