图片 3

通过JS得到当前焦点

图片 1

复制代码 代码如下:

1、通过原生js获取this对象

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″/>
<meta name=”auther” content=”fq” />
<title>获取鼠标坐标</title>
</head>
<body>
<script type=”text/javascript”>
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft – document.body.clientLeft,
y:ev.clientY + document.body.scrollTop – document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
document.getElementById(‘xxx’).value = mousePos.x;
document.getElementById(‘yyy’).value = mousePos.y;
}
document.onmousemove = mouseMove;
</script>
X:<input id=”xxx” type=”text” /> Y:<input id=”yyy” type=”text”
/>
</body>
</html>

3、vue中默认的鼠标参数

您可能感兴趣的文章:

  • js与jquery中获取当前鼠标的x、y坐标位置的代码
  • 基于JavaScript实现
    获取鼠标点击位置坐标的方法
  • JavaScript获取鼠标坐标的函数(兼容IE、FireFox、Chrome)
  • js获得鼠标的坐标值的方法
  • 通过百度地图获取公交线路的站点坐标的js代码
  • javascript 事件对象
    坐标事件说明
  • js Event对象的5种坐标
  • 通过JS 获取Mouse
    Position(鼠标坐标)的代码
  • JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
  • JavaScript实现二维坐标点排序效果

=>结果为:

通过JS得到当前焦点的坐标
如下是得到当前焦点的坐标:

图片 2

 

2、原生js获取鼠标对象

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title></title>
 7 
 8     </head>
 9 
10     <body>
11         <form action="" class="files">
12             <label class="file">
13                 选择图片
14                 <input type="file" id="file" name="file" onclick="onFileChange(event)"/>
15             </label>
16         </form>
17 
18     </body>
19     <script src="js/vue.js"></script>
20     <script type="text/javascript">
21         function onFileChange(e) {
22             console.log(e.files) ////获取图片    
23             console.log(e.target) //获取键盘的目标对象
24             console.log(e.target.files) //获取图片    
25         }
26     </script>
27 
28 </html>

 

图片 3

=>结果为:

=>结果为:

 1 <form action="" class="files" >
 2     <label class="file" >
 3         选择图片
 4         <input type="file" id="file" name="file" @click="onFileChange"/>
 5     </label>
 6 </form>
 7 
 8 methods:{
 9     onFileChange(e){
10     console.log(e)
11     console.log(e.files)
12     console.log(e.target)
13     console.log(e.target.files)
14     },
15 }

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
            <form action="" class="files" >
                <label class="file" >
                选择图片
                <input type="file" id="file" name="file"             onclick="onFileChange(this)"/>
                </label>
            </form>
    </body>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        function onFileChange(e) {
        console.log(e.files)////获取图片    
        console.log(e.target)//获取键盘的目标对象
        console.log(e.target.files)    //获取图片    
        }
    </script>
   </html>