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> 
    
  • 相关阅读:
    Android 使用html做UI的方法js与java的相互调用
    WebRequest之HttpWebRequest实现服务器上文件的下载(一)
    使用Json比用string返回数据更友好,也更面向对象一些
    DES加密与解密在GET请求时解密失败的问题解决(终级)
    中大型系统架构组合之EF4.1+ASP.NET MVC+JQuery
    说说标准服务器架构(WWW+Image/CSS/JS+File+DB)
    inline内联函数和宏的区别
    [C语言]mac下Des CBC加密
    x264和FFMPEG 编译后遇到的一些问题:UINT64_C,
    关于多线程的那些事
  • 原文地址:https://www.cnblogs.com/phpyangbo/p/js-shubiao-jianpan.html
Copyright © 2011-2022 走看看