鼠标移动事件--JavaScript

鼠标移动事件

<html>
<head>
<title>鼠标移动事件</title>
</head>

<style type="text/css">
div{
    width:300px;
    height:300px;
    border:1px solid red;
}

</style>

<script type="text/javascript">

//当鼠标在div上移动时,显示鼠标的坐标
function fun(e){
    var x = e.clientX;
    var y = e.clientY;

    //显示在文本框中
    var txt = document.getElementById("txt");
    txt.value = x + ":" + y;
}

</script>

<body>
    <input type="text" name="" id="txt">
    <div onmousemove = "fun(event)"> </div>
</body>

</html>
时间: 2024-07-30 21:21:44

鼠标移动事件--JavaScript的相关文章

鼠标单击事件--JavaScript

<html> <head> <title></title> </head> <script type="text/javascript"> //点击按钮让图片消失 function init(){ //拿到按钮对象 var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2&q

IE和Chrome执行javascript对鼠标双击事件的不同响应

最近在用天地图API帮同学做点开发的工作,主要是基于天地图的API实现违法用地举报的在线地图标绘,要实现的效果如下: 由于是基于天地图API的TPolygonTool工具实现面积量测和多边形绘制功能,实现思路如下: (1)基于按钮的鼠标点击事件开启多边形标绘工具: 1 //开启/关闭违法标绘工具 2 function onClickPolyTool() { 3 var btn = document.getElementById("polyToolBtn"); 4 if (btn.val

转:WebDriver(Selenium2)模拟鼠标经过事件

在自动化测试过程中,由于javascript的使用,我们常常需要点击一些鼠标经过显示的菜单等元素,这时需要触发该元素的鼠标经过事件.使用WebDriver有以下两种实现. 1.使用Action Java代码   public void moveToElement(WebDriver driver, By locator) { Actions builder = new Actions(driver); builder.moveToElement(driver.findElement(locato

JS鼠标滚轮事件解析

一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有firefox支持) 另外在操作的过程中需要添加事件监听,兼容性写法 代码如下: /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); // W3C

js中鼠标滚轮事件详解

(以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题 附加事件 其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc

鼠标滚轮事件MouseWheel

其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox 却不支持此事件,不过庆幸 Firefox  中提供了另外一个等同的事件:"DOMMouseScroll" . OK,我们现在已经知道了不同浏览器之间实现的差别,兼容代码如下: var addEvent = (function () { if (window.addEventListener

js整频滚动展示效果(函数节流鼠标滚轮事件)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-T

jquery 鼠标滚轮事件 插件 Mousewheel

jquery插件默认是不支持鼠标中轮滚轮事件的,现在我们可以用于添加跨浏览器的鼠标滚轮支持可以使用jquery的Mousewheel插件. 使用mousewheel事件有以下两种方式: 使用mousewheel和unmousewheel事件函数: 使用经典的bind和unbind函数. JavaScript Code复制内容到剪贴板 $('div.mousewheel_example').mousewheel(fn); $('div.mousewheel_example').bind('mous

鼠标mouse事件冒泡处理

简单的鼠标移动事件: 进入 mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 移出 mouseleave: 不冒泡 mouseout:冒泡 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件 我们通过一个案例观察下问题: 给一个嵌套的层级绑定mouseout事件