zoukankan      html  css  js  c++  java
  • js鼠标事件、键盘事件实例代码

    讲述了:鼠标的哪个按键被点击、当前鼠标的光标坐标是多少、被按下键的unicode码是多少、当前鼠标的光标相对于屏幕的坐标是多少、当前鼠标的光标坐标是多少、shift键是否按下、当前被点击的是哪一个元素

    1. 鼠标的哪个按键被点击?

    <html> 
    <head> 
    <script type="text/javascript"> 
    function whichButton(event) 
    { 
    if (event.button==2) 
    { 
    alert("你点击了鼠标右键!") 
    } 
    else 
    { 
    alert("你点击了鼠标左键!") 
    } 
    } 
    </script> 
    </head> 
    
    <body onmousedown="whichButton(event)"> 
    <p>请单击你鼠标的左键或右键试试</p> 
    </body> 
    </html>
    

     2. 当前鼠标的光标坐标是多少?

    <html> 
    <head> 
    <script type="text/javascript"> 
    function show_coords(event) 
    { 
    x=event.clientX 
    y=event.clientY 
    alert("X 坐标: " + x + ", Y 坐标: " + y) 
    } 
    </script> 
    </head> 
    
    <body onmousedown="show_coords(event)"> 
    
    <p>在此文档中按下你鼠标的左键看看!</p> 
    
    </body> 
    </html> 
    

     3. 被按下键的unicode码是多少?

    <html> 
    <head> 
    <script type="text/javascript"> 
    function whichButton(event) 
    { 
    alert(event.keyCode) 
    } 
    
    </script> 
    </head> 
    
    <body onkeyup="whichButton(event)"> 
    <p>在此文档中按下你键盘上的某个键看看</p> 
    </body> 
    </html> 
    

     4. 当前鼠标的光标相对于屏幕的坐标是多少?

    <html> 
    <head> 
    
    <script type="text/javascript"> 
    function coordinates(event) 
    { 
    x=event.screenX 
    y=event.screenY 
    alert("X=" + x + " Y=" + y) 
    } 
    
    </script> 
    </head> 
    <body onmousedown="coordinates(event)"> 
    
    <p> 
    点击你鼠标的左键 
    </p> 
    
    </body> 
    </html> 
    

     5. 当前鼠标的光标坐标是多少?

    <html> 
    <head> 
    
    <script type="text/javascript"> 
    function coordinates(event) 
    { 
    x=event.x 
    y=event.y 
    alert("X=" + x + " Y=" + y) 
    } 
    
    </script> 
    </head> 
    <body onmousedown="coordinates(event)"> 
    
    <p> 
    点击你鼠标的左键 
    </p> 
    
    </body> 
    </html> 
    

     6. shift键是否按下?

    <html> 
    <head> 
    <script type="text/javascript"> 
    function isKeyPressed(event) 
    { 
      if (event.shiftKey==1) 
        { 
        alert("shit键按下了!") 
        } 
      else 
        { 
        alert("shit键没有按下!") 
        } 
      } 
    </script> 
    </head> 
    
    <body onmousedown="isKeyPressed(event)"> 
    
    <p>按下shit键,点击你鼠标的左键</p> 
    
    </body> 
    </html> 
    

     7. 当前被点击的是哪一个元素?

    <html> 
    <head> 
    <script type="text/javascript"> 
    function whichElement(e) 
    { 
    var targ 
    if (!e) var e = window.event 
    if (e.target) targ = e.target 
    else if (e.srcElement) targ = e.srcElement 
    if (targ.nodeType == 3) // defeat Safari bug 
       targ = targ.parentNode 
    var tname 
    tname=targ.tagName 
    alert("你点击了 " + tname + "元素") 
    } 
    </script> 
    </head> 
    
    <body onmousedown="whichElement(event)"> 
    <p>在这里点击看看,这里是p</p> 
    
    
     
    <h3>或者点击这里也可以呀,这里是h3</h3> 
    <p>你想点我吗??</p> 
    <img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic"> 
    </body> 
    
    </html> 
    
  • 相关阅读:
    枚举三部曲之一
    Java的版本历史与特性
    Oracle备份恢复之冷备份恢复与异机还原
    Oracle性能优化之普通用户使用dbms_xplan包需要有的权限
    一个简单的RMAN自动备份脚本
    Oracle体系结构之Oracle基本数据字典:v$database、v$instance、v$version、dba_objects
    转载:oracle null处理
    Oracle SQL之 序列使用限制
    Oracle的update语句优化研究
    oracle在impdp时报ORA-31655和ORA-39154
  • 原文地址:https://www.cnblogs.com/phpyangbo/p/js-shubiao-jianpan.html
Copyright © 2011-2022 走看看