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

    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>


      [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


    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>


      [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


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

    <html>
    <head>
    <script type="text/javascript">
    function whichButton(event)
    {
    alert(event.keyCode)
    }

    </script>
    </head>

    <body onkeyup="whichButton(event)">
    <p>在此文档中按下你键盘上的某个键看看</p>
    </body>
    </html>


      [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


    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>


      [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


    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>


      [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


    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>


      [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]


    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>


      [Ctrl+A 全选
  • 相关阅读:
    背景图片填充问题
    a:hover 等伪类选择器
    jQuery中animate()方法用法实例
    响应式框架Bootstrap
    HTTP入门
    jQuery选择器
    httplib urllib urllib2 pycurl 比较
    校招
    JAVA描述的简单ORM框架
    Roman to Integer
  • 原文地址:https://www.cnblogs.com/wei2yi/p/2267080.html
Copyright © 2011-2022 走看看