• 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>

    
    

  • 相关阅读:
    如何做兼容性测试
    兼顾pc和移动端的textarea字数监控的实现方法
    js监听audio播放完毕
    layer弹出层移动端组件
    moment.js(日期处理类库)的使用
    移动端跳转方案-解决误触
    js移动端回退监听 popstate
    js大数计算之展示
    js大数计算之计算
    封装jquery的ajax
  • 原文地址:https://www.cnblogs.com/biyongyao/p/5840083.html
Copyright © 2020-2023  润新知