zoukankan      html  css  js  c++  java
  • js鼠标,键盘,坐标轴事件

    鼠标按下事件,左键是0,滑轮是1,右键2

         document.getElementById("box").onmousedown =function(e)
            {
                if (e.button==0)
                {
                    this.style.background="#c00";
                }
                else if(e.button==1)
                {
                   this.style.background="#0c0";
                }
                else if(e.button==2)
                {
                  this.style.background="#00c";
                }
                else
                {
                    alert("你按下了"+e.button+"号键");
                }
                 console.log(e.type);
                 console.log(e.screenX);
                 console.log(e.clientX);
                 console.log(e.offsetX);
    }

    键盘ctrl,alt

            document.onkeydown=function(e)
            {
                if (e.ctrlKey)
                {
                    alert("你按下了ctrl键");
                }
    
                 else if (e.altKey)
                {
                    alert("你按下了alt键");
                }
                else  if (e.shiftKey)
                {
                    alert("你按下了shift键");
                }
                 else if (e.ctrlKey &&altKey &&shiftKey)
                {
                    alert("你按下了三个键");
                }
                 console.log(e.type);
            }

    坐标轴时间

    var textbox=document.getElementById("textbox");
       var val='';
       document.getElementById("box").onmousedown=function(e)
       {
        e=window.event || e;
        val="e.screenX: "+e.screenX+
           "
    e.screenY: "+e.screenY+
            "
    clientX: "+e.clientX+    //clientX支持所有浏览器
             "
    clientY: "+e.clientY+   //
              "
    e.X: "+e.X+
               "
    e.Y: "+e.Y+
                "
    pageX: "+e.pageX+
                 "
    pageY: "+e.pageY+
                  "
    offsetX: "+e.offsetX+
                   "
    offsetY: "+e.offsetY+
                   "
    offsetX: "+(e.clientX-this.offsetLeft);
                        textbox.value=val;
    
                        //offset火狐不支持
                        //可以用此方法
                        //e.clientX-offsetleft           
         }

    //html代码

    <div id="box"> </div>
    <textarea id="textbox" style="display:block;margin:50px auto;400px;height:200px;"></textarea>

    
    

  • 相关阅读:
    MyEclipse添加SVN插件
    Postgresql的character varying = bytea问题
    Hibernate主键增加方式
    java配置环境变量
    Maven常用构建命令
    Postgresql的主键自增长
    js判断金额
    最精简的SQL教程
    SQL练习1:统计班级男女生人数
    sql 百万级数据库优化方案
  • 原文地址:https://www.cnblogs.com/biyongyao/p/5840083.html
Copyright © 2011-2022 走看看