zoukankan      html  css  js  c++  java
  • 事件对象,阻止冒泡,键盘事件

    event事件兼容:

     1 //IE    event
     2     oDiv.style.left=event.clientX+'px';
     3     oDiv.style.top=event.clientY+'px';*
     4     
     5 //FF    事件处理的参数
     6     oDiv.style.left=ev.clientX+'px';
     7     oDiv.style.top=ev.clientY+'px';
     8 
     9     /*if(ev){
    10         oDiv.style.left=ev.clientX+'px';
    11         oDiv.style.top=ev.clientY+'px';
    12     }
    13     else{
    14         oDiv.style.left=event.clientX+'px';
    15         oDiv.style.top=event.clientY+'px';
    16     }*/

    示例:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <style>
     5 #div1 {width:100px; height:100px; background:red; position:absolute;}
     6 </style>
     7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     8 <title>无标题文档</title>
     9 <script type="text/javascript">
    10 document.onmousemove=function (ev){
    11     var oDiv=document.getElementById('div1');
    12     
    13     var oEvent=ev||event;
    14     
    15     oDiv.style.left=oEvent.clientX+'px';
    16     oDiv.style.top=oEvent.clientY+'px';
    17 
    18 };
    19 </script>
    20 </head>
    21 
    22 <body>
    23 <div id="div1">
    24 </div>
    25 </body>
    26 </html>

    同理,对于键盘事件(示例):

    1 document.onkeydown=function (ev)
    2 {
    3     var oEvent=ev||event;
    4     
    5     alert(oEvent.keyCode);
    6 };

    阻止冒泡:

     1 <html>
     2 <head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     4 <title>无标题文档</title>
     5 <script type="text/javascript">
     6 window.onload=function (){
     7     var oBtn=document.getElementById('btn1');
     8     
     9     oBtn.onclick=function (ev){
    10         var oEvent=ev||event;
    11         alert('btn1');
    12         
    13         oEvent.cancelBubble=true;  //阻止点击button按钮时弹出hello(取消冒泡)
    14     };
    15 
    16     document.onclick=function (){
    17         alert('hello');
    18     };
    19 };
    20 </script>
    21 </head>
    22 <body>
    23 <input id="btn1" type="button" value="aaa" />
    24 </body>
    25 </html>
  • 相关阅读:
    Bootstrap Table
    XML CDATA识别“<,>”
    LigerUI之Grid使用详解(一)——显示数据 --分页
    Oracle中对XMLType的简单操作(extract、extractvalue...)
    Qt实现应用程序单实例运行--LocalServer方式
    Live m3u8播放3个文件自动停止问题
    markdown
    node.js 知识记录
    .NET 高级架构师 WEB架构师 ------时间 总结 专注
    .NET 高级架构师 WEB架构师 ------走正确的路
  • 原文地址:https://www.cnblogs.com/wxydigua/p/3242537.html
Copyright © 2011-2022 走看看