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>
  • 相关阅读:
    修改tomcat访问路径
    HTML img标签属性
    HTML marquee标签属性详解
    HTML input标签
    HTML iframe 标签
    Linux root默认密码问题
    [Linux]查看本机IP
    [Linux]命令行模式切换
    [Linux]命令root与other切换
    [Linux]XAMPP安装
  • 原文地址:https://www.cnblogs.com/wxydigua/p/3242537.html
Copyright © 2011-2022 走看看