鼠标事件（JS原生方法）

最新推荐文章于 2022-10-07 17:04:18 发布
最新推荐文章于 2022-10-07 17:04:18 发布
阅读量159 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/zhouguoshuai/p/8192201.html
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>鼠标事件</title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("input[type='button']")
                    .css("width", "280px")
                    .css("height", "100px")
                    .css("font-size", "24pt");
            });

            function fnOver() {
                $("h1").html("鼠标移动到按钮上了！");
            }

            function fnOut() {
                $("h1").html("鼠标移开了！");
            }

            function fnMove() {
                $("div").text(event.x + "," + event.y);
            }
        </script>
    </head>

    <body>
        <h1></h1>
        <input type="button" value="测试悬停" οnmοuseοver="fnOver();" οnmοuseοut="fnOut();" />
        <input type="button" value="测试点击" οnclick="$('h1').html('点击了鼠标！');" />
        <input type="button" value="测试双击" οndblclick="$('h1').html('双击了鼠标！');" />
        <input type="button" value="测试鼠标按键" οnmοusedοwn="$('h1').html('按下了鼠标！');" οnmοuseup="$('h1').html('松开了鼠标！');" />
        <div style="border: double 3px red;width: 400px; height: 300px;" οnmοusemοve="fnMove();">
        </div>
    </body>

</html>

转载于:https://www.cnblogs.com/zhouguoshuai/p/8192201.html

weixin_30273763
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js鼠标事件
m0_57774967的博客
05-06 2546
通过鼠标触发事件, 类似用户的行为: 属性 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 onmousedown 当按下鼠标按钮时运行脚本 onmousemove 当鼠标指针移动时运行脚本 onmouseout 当鼠标指针移..
JavaScript鼠标悬停事件用法解析
10-15
JavaScript中的鼠标悬停事件是网页交互中常用的功能，允许开发者在用户将鼠标光标移到特定元素上方或离开该元素时执行相应的操作。本篇文章主要探讨了`onmouseover`和`onmouseleave`两个事件处理程序。 首先，`...
关于鼠标事件的原生方法 event.target event.srcElement
12-17 371
如果不采用jquery方法，而是用js原生方法，进行dom删除，应该注意以下几点： 1、IE8及以下不支持event.target，而是用event.srcElement 2、需要在html 事件中，把event传参进去，如 1 源码如下：         test         function toRemove(event)
JS的精髓，事件详解
大河之犬的博客
10-07 1172
在这个例子中，浏览器从上到下解析到window.onload时，就会先不解析window.onload里面的代码，而是继续往下解析，直到把整个HTML文档解析完后才会回去执行window.onload里面的代码。在这个例子中，我们使用div元素模拟出一个按钮，并且为它添加了单击事件。选取文本后点击鼠标右键，【复制】这个选项还可以点击，但实际上，点击【复制】选项后再粘贴，是粘贴不出内容来的。实际开发中，我们在使用搜索框的时候，每次点击搜索框，它就自动帮我们把文本框内的文本全选中了，此时就用到了。
原生js--鼠标事件
weixin_34396103的博客
02-21 554
鼠标事件对象几个重要的属性： clientX 窗口坐标，加上垂直滚动可以得到文档纵坐标 clientY 窗口坐标，加上水平滚动可以得到文档横坐标 altKey boolean值，点击时是否按下了alt键 ctrlKey boolean值，点击时是否按下了ctrl键 metaKey boolean值，点击时是否按下了meta键 shiftKey boolean值，点击时是否按下了shif...
原生JS添加鼠标事件
championSuiyang的博客
04-24 4351
>   html>   head>   meta charset="utf-8">   title>无标题文档title>   style>   body { background-color:#bbb;}   canvas { background-color:#fff}   style>   head>            body>   canvas id="c
基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件.zip
最新发布
10-23
基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件 基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件 基于原生JavaScript完成的网页端2048游戏，适配移动端...
通过原生JS实现为元素添加事件的方法
10-21
事件监听和处理可以通过多种方式实现，其中原生JavaScript提供了一种非常灵活和强大的方法。今天，我们将探讨如何通过原生JavaScript为网页中的HTML元素添加事件监听器。 首先，了解原生JavaScript添加事件监听器的...
原生js实现trigger方法示例代码
10-16
原生JavaScript中实现trigger方法，主要涉及以下几个知识点： 1. DOM事件监听与绑定：在JavaScript中，通常会用addEventListener()方法来绑定事件监听器。该方法接受三个参数：事件名称、事件处理函数以及一个布尔...
这是利用html+css+原生JavaScript制作的鼠标事件，鼠标跟踪
04-13
这是利用html+css+原生JavaScript制作的鼠标事件，鼠标跟踪
JavaScript鼠标事件及案例
Han_Zhou_Z的博客
12-05 2041
目录 一、鼠标事件 1、鼠标事件的常用方法 （1）鼠标事件常用方法 （2） 禁止鼠标右击菜单：contextmenu （3）禁止鼠标选中：selectstart 2、鼠标事件对象 3、案例（图片随着鼠标移动） 一、鼠标事件 1、鼠标事件的常用方法 （1）鼠标事件常用方法 onclick 单击鼠标左键时触发 onfocus 获得鼠标指针焦点触发 onblur 失去鼠标指针焦.
原生JS写点击事件
nostrud ipsum6
07-10 6278
varallClick=document.getElementById("all1"); //JS监听 allClick.addEventListener('click',function(){ varbolcheck=this.checked; varobox=this.parentNode; varlis=obox.children[2].getEl...
js原生，鼠标离开事件
热门推荐
gary的博客
02-23 3万+
mouseout: 鼠标离开事件mouseleave: 鼠标离开事件区别: 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。mouseover: 鼠标移入事件mouseenter: 鼠标移入事件不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout只有在鼠标指针穿过被...
Js之鼠标事件-鼠标事件
cx1361855155的博客
08-04 9376
鼠标点击事件包括 click（点击），dbclick（双击），mousedown（按下）和 mouseup（松开）四个。其中 click 事件比较常用，而mousedown 和 mouseup事件类型多用于鼠标施放，拉伸操作中。如果从父元素中移动到子元素中，也会触发元素的mouseover事件类型。mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针的移动速度块慢以及浏览器跟踪更新的速度。...
js 获取鼠标位置
huolan__34的博客
12-27 2418
在JavaScript中，当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。 属性及其兼容性 属性 说明 兼容性 clientX 以浏览器窗口左上顶角为原点，定位 x 轴坐标 ...
JS鼠标事件
小罗的博客
05-10 2547
📗目录 鼠标事件 鼠标点击 鼠标定位 🍊鼠标事件 dblclick 双击鼠标左键时发生，如果右键也按下则不会发生 mousedown 单击任意一个鼠标按钮时发生 mouseout 鼠标指针位于某个元素上且将要移出元素的边界时发生 mouseover 鼠标指针移出某个元素到另一个元素上时发生 mouseup 松开任意一个鼠标按钮时发生 mousemove 鼠标在某个元素上时持续发生 onmouseover 注册鼠标经过时事件处理函数 onmouseout 注册鼠标移开时事件处理函数
Js-三大事件（鼠标事件、键盘事件、html事件）
qq_35820350的博客
08-14 1419
原文出处：https://blog.csdn.net/qwer_df_b/article/details/77509859 鼠标事件 click：单击 dblclick：双击 mousedown：鼠标按下 mouseup：鼠标抬起 mouseover：鼠标悬浮 mouseout：鼠标离开 mousemove：鼠标移动 mouseenter：鼠标进入 mouseleave：鼠标离...
原生 JS 模拟点击事件
kayron的博客
01-24 1万+
访问页面时, 调用 click 事件:  document.querySelector(class 或 id 等).click(); function clickEvent() {  // TODO .... }
js+css鼠标悬浮框
IT猿_Ocean的成长之路
09-02 935
#hint{       width:198px;       border:1px solid #000000;       background:#99ff33;       position:absolute;       z-index:9;       padding:6px;       line-height:17px;       text-align:left;
原生javascript触发模拟鼠标点击事件
07-08
原生JavaScript可以使用`dispatchEvent`方法来触发模拟鼠标点击事件。以下是一个示例代码： ```javascript // 获取触发点击事件的元素 var element = document.getElementById("myElement"); // 创建鼠标点击事件 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值