十四、鼠标事件

最新推荐文章于 2023-10-09 12:40:51 发布
最新推荐文章于 2023-10-09 12:40:51 发布
阅读量342 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript dom 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63011146/article/details/121755337
版权

1. 鼠标事件

// 点击事件  => onclick

// 双击事件  => ondblclick

// 鼠标右键点击事件 => oncontextmenu

// 鼠标进入事件 => (onmouseenter || onmouseover)   // onmouseover 比 onmouseenter 先执行

// 鼠标离开事件 => (onmouseleave || onmouseout)    // onmouseout 比 onmouseleave 先执行

注意:如果元素里面存在子元素，鼠标在元素中移动时会反复触发 onmouseover 和onmouseout

// 鼠标移动事件 => onmousemove

// 鼠标按下事件 => onmousedown

// 鼠标弹起事件 => onmouseup

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .a{
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        .a .b{
            width: 100px;
            height: 100px;
            background-color: lightcyan;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
    </div>
    <script>
        let a = document.querySelector('.a')
        // 点击事件
        a.onclick = function(){
            console.log('点击事件');
        }
        // 双击事件（在两次点击事件后触发）
        a.ondblclick = function(){
            console.log('双击事件');
        }
        // 鼠标右键点击事件
        a.oncontextmenu = function(){
            console.log('右键事件');
        }

        // 鼠标进入事件 (onmouseover比onmouseenter先执行)
        a.onmouseenter = function(){
            console.log('鼠标进入enter');
        }
        a.onmouseover = function(){
            console.log('鼠标进入over');
        }
        // 鼠标离开事件（onmouseout比onmouseleave先执行）
        a.onmouseleave = function(){
            console.log('鼠标离开leave');
        }
        a.onmouseout = function(){
            console.log('鼠标离开out');
        }
        // 注意：如果元素里面存在子元素，鼠标在子元素中移动时会反复触发 onmouseover 和 onmouseout
        
        // 鼠标移动事件（所有的事件方法，都有一个默认的参数：事件对象）
        a.onmousemove = function(e){
            // 获取鼠标指针位置
            let {offsetX,offsetY} = e
            // console.log('鼠标移动',offsetX,offsetY);
        }

        // 鼠标按下事件
        a.onmousedown = function(){
            console.log('鼠标按下');
        }

        // 鼠标弹起
        a.onmouseup = function(){
            console.log('鼠标弹起');
        }
    </script>
</body>
</html>

网页显示为：

控制台显示为：

2. 视口宽高

window.innerWidth 返回视口宽度

window.innerHeight 返回视口高度
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小游戏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .dian{
            width: 30px;
            height: 30px;
            background-color: red;
            position: absolute;
        }
        .num{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="num">
        <span>当前数量：</span>
        <span id="num"></span>
    </div>
    <script>
        // window.innerWidth 返回视口宽度
        // console.log(window.innerWidth);
        // window.innerHeight 返回视口高度
        // console.log(window.innerHeight);

        // 生成元素的最大left值
        let maxLeft = window.innerWidth - 30
        // 生成元素的最大top值
        let maxTop = window.innerHeight - 30

        //该定时器生成点
        //定时器有一个返回值
        let timer1 = setInterval(() => {
            // 创建一个div元素
            let dian = document.createElement('div')
            // 个创建的div元素添加类选择器样式
            dian.className = 'dian'
            dian.style.left = Math.random()*maxLeft+'px'
            dian.style.top = Math.random()*maxTop+'px'
            // 每个元素注册点击事件
            dian.onclick = function(){
                this.remove()
            }
            // 将创建的div元素添加到body中
            document.body.appendChild(dian)
        }, 500);
        console.log(timer1);

        //该定时器统计点的数量，并判断游戏是否结束
        let timer2 = setInterval(() => {
            //获取数量
            let num = document.querySelectorAll('.dian').length
            //显示当前点的数量
            document.querySelector('#num').innerHTML = num
            //判断游戏是否结束
            if(num>=10){
                alert('Game Over~~')
                // 清除定时器
                clearInterval(timer1)
                clearInterval(timer2)
            }
        }, 100);
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        table{
            border-collapse: collapse;
        }
        td,th{
            text-align: center;
            border:1px solid #ccc;
            padding: 2px 10px;
        }
        td img{
            width: 100px;
        }
        td input{
            width: 40px;
            text-align: center;
            outline: none;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input id="ckAll" type="checkbox">全选</th>
                <th>商品名称</th>
                <th>商品图片</th>
                <th>商品价格</th>
                <th>购买数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="7" style="text-align: right;">
                    <span>总计：</span>
                    <span id="total"></span>
                </td>
            </tr>
        </tfoot>
    </table>
    <script>
        //定义一个商品数组
        let goodses = [
            {
                name:'iphone手机',
                img:'https://img13.360buyimg.com/n7/jfs/t1/137629/3/23805/201521/61aa1b26Eda614739/0a66ec0ce614c97c.jpg',
                price:5999,
                count:5,
                isck:false
            },
            {
                name:'华为手机',
                img:'https://img10.360buyimg.com/n7/jfs/t1/179598/36/6697/144323/60b47feaEf44a5eed/b88c0485ca234e0d.jpg',
                price:6289,
                count:2,
                isck:true
            },
            {
                name:'小米手机',
                img:'https://img10.360buyimg.com/n7/jfs/t1/160230/34/12049/58798/60484a63Edd19d4bb/401ca05f7e2f047f.jpg',
                price:2899,
                count:7,
                isck:false
            },
            {
                name:'三星手机',
                img:'https://img10.360buyimg.com/n7/jfs/t1/199895/25/19291/124250/61a9cd69E951b2336/bf9855e517120b39.jpg',
                price:9399,
                count:3,
                isck:false
            }
        ]
        
        //加载商品信息
        function loadGoodses(){
            //循环商品数组
            goodses.forEach(g=>{
                // 每个商品信息，创建一个对应的tr
                let tr = document.createElement('tr')
                // 每个tr里面有7个td
                let td1 = document.createElement('td')
                // 每一个商品对应的那个复选框
                let ck = document.createElement('input')
                ck.type = 'checkbox'
                ck.className = 'ck'   //注意：这里只是加一个标记
                // 设置复选框的选中状态
                ck.checked = g.isck
                // 注册复选框状态发生改变后事件
                ck.onchange = function(){
                    //更新商品的状态
                    g.isck = ck.checked
                    //再次调用计算总计的方法
                    totalPrice()
                    // 判断是否需要更新全选复选框的状态
                    document.querySelector('#ckAll').checked = goodses.every(r=>r.isck)
                }
                td1.appendChild(ck)
                let td2 = document.createElement('td')
                td2.innerHTML = g.name
                let td3 = document.createElement('td')
                let img = document.createElement('img')
                img.src = g.img
                td3.appendChild(img)
                // td4显示单价
                let td4 = document.createElement('td')
                td4.innerHTML = '￥'+g.price.toFixed(2)
                let td5 = document.createElement('td')
                // 减按钮
                let btn1 = document.createElement('button')
                btn1.innerHTML = '-'
                // 给减按钮注册点击事件
                btn1.onclick = function(){
                    g.count--  //商品数量减1
                    // 购买数量不能小于1
                    if(g.count<1) g.count=1
                    // 更新商品数量
                    count.value = g.count
                    // 更新商品小计
                    td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)
                    //再次调用计算总计的方法
                    totalPrice()
                }
                td5.appendChild(btn1)
                // 文本框
                let count = document.createElement('input')
                count.value = g.count  //设置文本框的值
                td5.appendChild(count)
                let btn2 = document.createElement('button')
                btn2.innerHTML = '+'
                // 给加按钮注册点击事件
                btn2.onclick = function(){
                    g.count ++  //商品数量加1
                    //更新界面
                    count.value = g.count
                    td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)
                    //再次调用计算总计的方法
                    totalPrice()
                }
                td5.appendChild(btn2)
                // td6里面显示的是单个商品的小计
                let td6 = document.createElement('td')
                td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)
                let td7 = document.createElement('td')
                let del = document.createElement('button')
                del.innerHTML = '删除'
                // 给删除按钮注册点击事件
                del.onclick = function(){
                    //删除tr标签
                    tr.remove()
                    // 获取当前商品在数组中的索引
                    let index = goodses.findIndex(r=>r.name===g.name)
                    //删除数组中的原始数据
                    goodses.splice(index,1)
                    //再次调用计算总计的方法
                    totalPrice()
                }
                td7.appendChild(del)
                // 将所有的td添加到tr中
                tr.appendChild(td1)
                tr.appendChild(td2)
                tr.appendChild(td3)
                tr.appendChild(td4)
                tr.appendChild(td5)
                tr.appendChild(td6)
                tr.appendChild(td7)
                // 将tr添加到tbody中
                document.querySelector('tbody').appendChild(tr)
            })
        }  
        //调用加载商品信息的方法
        loadGoodses() 

        //计算总计的方法
        function totalPrice(){
            //计算出总计
            let money = goodses.filter(r=>r.isck).reduce((a,b)=>a+b.count*b.price,0)
            //显示总计
            document.querySelector('#total').innerHTML = '￥'+money.toFixed(2)
        }
        //调用计算总计的方法
        totalPrice()

        //给全选复选框注册状态改变后事件
        document.querySelector('#ckAll').onchange = function(){
            let cks = document.querySelectorAll('.ck')
            //更新DOM
            cks.forEach(ck=>{
                ck.checked = this.checked
            })
            //更新数据
            goodses.forEach(g=>{
                g.isck = this.checked
            })
            //再次调用计算总计的方法
            totalPrice()
        }
    </script>
</body>
</html>

默默229
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java监听键盘鼠标全局事件[定义].pdf
10-11
四、Java监听鼠标事件 Java监听鼠标事件可以通过使用Windows Hook机制来实现。通过设置鼠标Hook，可以捕捉鼠标事件，并将其传递给Java应用程序。Java应用程序可以通过JNI调用native方法来处理鼠标事件。 五、...
select下位菜单触发mouseout,mouseleave事件bug
可遇，好孩子
12-21 6219
引用一下这位兄台的博客今天无意中看到的，我写这篇博客，真的只是简单测试一下。爬虫。请不要误会我的初终 http://blog.csdn.net/ShanaMaid/article/details/52594879 //这是一个简单的cur函数。就用这函数吧 function GetData($url, $cookie="") { $ch = curl_init(); curl_s
html select控件移动到option标签时就触发mouseleave()解决方法
tianfugui的博客
01-27 4112
今天在做select标签鼠标移出时就自动隐藏的功能，在谷歌下面调试没问题，但是到火狐上调试时发现鼠标下移到option标签时就会触发mouseleave方法,百度了之后找到问题的方法，就是在mouseleave方法中加入一个事件对象，通过判断鼠标移动到的对象是否为null或undefined(移动到option标签上ie下为null，firefox等为undefined)。 代码: $(xxx
鼠标移入select options会触发mouseleave 事件处理方案
奔跑的痕迹的博客
07-26 2525
参考 html select控件移动到option标签时就触发mouseleave()解决方法html select控件移动到option标签时就触发mouseleave()解决方法https://blog.csdn.net/tian_i/article/details/79181721 js获取某个容器下的所有标签，并判断标签类型https://blog.csdn.net/weixin_30498807/article/details/102265975 js(判断元素是否包含某个class名)https
OnMouseEnter、OnMouseDown和OnMouseUp
qq_20179331的博客
06-21 2818
在Unity中，OnMouseEnter、OnMouseDown和OnMouseUp是用于处理鼠标事件的函数。这些函数可以被添加到Unity对象的脚本中，以便在鼠标与该对象交互时执行相应的操作。
dom 操作总结即获取图片的样式和宽高 监听滚动事件
jjw_zyfx的博客
09-22 410
<div className="smallItemContent"> <div className="wrapImage"><img src={image05} alt=""/></div> <div className="wrapBottom"> <div className="worke...
读jQuery之十四 （触发事件核心方法）
10-28
触发事件，或称模拟用户动作。比如点击，我们可以用代码去模拟用户点击，达到的效果与真实的鼠标点击是一样的。
10个经典的网页鼠标特效代码
08-28
接着，在JavaScript代码中使用onmouseover和onmouseout事件来实现鼠标指向出现实用特殊提示的效果。 知识点二：悬停效果 悬停效果是指鼠标指向某个元素时，元素的样式发生变化。要实现悬停效果，可以使用CSS的:...
实验项目二十二　 javascript事件处理.doc
06-11
除浏览器事件、鼠标事件、键盘事件外，还有许多其他类型的事件，如窗口事件、表单事件等。在 JavaScript 中，我们可以使用相应的事件处理函数来响应这些事件。 在本实验项目中，我们将学习如何使用 JavaScript 事件...
Qt十字按钮
05-29
3. **事件处理**：处理鼠标事件，如mousePressEvent()、mouseMoveEvent()和mouseReleaseEvent()。当鼠标按下时，记录按下位置；鼠标移动时，根据移动方向更新数值并触发相应的信号；鼠标释放时，结束操作。 4. **...
【JavaScript】鼠标十大事件简介和测试
归忆_AC的博客
08-11 1305
onclick：按下鼠标时触发。 ondblclick：在同一个元素上双击鼠标时触发。 onmousedown：按下鼠标键时触发。 onmouseup：释放按下的鼠标键时触发。 onmousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。 onmouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件。 onmouseleave：鼠标离开一个节点时触发，离开子节点不会触发这个事件。 onmouseover：鼠标进入一个节点时触发，进入子节点也会触发这个
事件类型（鼠标、键盘、浏览器）
m0_71242735的博客
03-23 1497
鼠标事件、键盘事件、浏览器事件
JS中的鼠标事件
m0_70185826的博客
07-01 1万+
通过鼠标触发事件，类似用户的行为：mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。 MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。 0代表左键 1代表中键 2代表右键 2. MouseEvent.clientX，MouseEvent.clientY MouseEvent.clientX属性返回鼠标位置相对于浏
鼠标的移入、移出事件
热门推荐
06-15 1万+
① 只要鼠标指针移入（或移出）事件所绑定的元素或其子元素，都会触发mouseover（或mouseout）事件② 只有鼠标指针移入（或移出）事件所绑定的元素时，才会触发mouseenter（或mouseleave）事件。
鼠标常用的事件
zhj1329000的博客
03-24 1129
onmouseover: 鼠标移入事件(可以触发冒泡)onmouseout: 鼠标移出事件(可以触发冒泡)onmouseenter: 鼠标移入事件(不会触发冒泡)onmouseleave: 鼠标移出事件(不会触发冒泡)onfocus: 获取鼠标焦点事件。onclick: 鼠标点击事件。onblur: 失去鼠标焦点。onmouseup: 鼠标弹起触发。onmousedown: 鼠标按下触发。onmousemove: 鼠标移动事件。
鼠标移入事件onmouseover、onmouseenter 鼠标移出事件onmouseleave、onmouseout 的区别
小黑黑的博客
08-27 5444
onmouseenter和onmouseover都是鼠标移入事件，即鼠标放入到元素上相应事件触发，但是这两个事件是存在差别的。 onmouseover、onmouseout子元素会影响到父元素， 而onmouseenter和onmouseleave 子元素不会影响父元素 var box = document.getElementById('box'); var box2 = docu...
099_鼠标事件
aihiao的专栏
10-04 1286
1. mouseenter: 当鼠标移入某元素时触发。 2. mouseleave: 当鼠标移出某元素时触发。 3. mouseover: 当鼠标移入某元素时触发, 移入和移出其子元素时也会触发。 4. mouseout: 当鼠标移出某元素时触发, 移入和移出其子元素时也会触发。 5. mouseover、mouseout和mouseenter、mouseleave最大的区别, 在于子元素连带触发。 6. mousemove: 鼠标在某元素上移动时触发, 即使在其子元素上也会触发。 7. 例子
QT基础入门——Qt事件（五）
最新发布
妄北y
10-09 3985
事件（event）是由系统或者 Qt 本身在不同的时刻发出的。当用户按下鼠标、敲下键盘，或者是窗口需要重新绘制的时候，都会发出一个相应的事件。一些事件在对用户操作做出响应时发出，如键盘事件等；另一些事件则是由系统自动发出，如计时器事件。
HTML DOM 事件 —— 鼠标事件 JS鼠标事件
Yxd0724的博客
08-30 7791
onclick、oncontextmenu、ondblclick、onmousedown、onmouseenter、onmouseleave、onmousemove、onmouseover、onmouseout、onmouseup
C++ QT鼠标拖动时变成十字
05-28
当鼠标拖动时变成十字光标，通常是表示你正在对一个可调整大小的控件进行操作，比如一个窗口或者一个QSplitter控件。 在Qt中，你可以使用setCursor()方法来设置控件的鼠标光标。如果你希望在鼠标拖动时将光标设置为十字光标，你可以使用Qt::SizeAllCursor枚举值，它表示一个四向箭头光标，表示可以在任意方向调整大小。 例如，如果你的控件是一个QWidget对象，你可以在控件的mousePressEvent()方法中设置光标，如下所示： ``` void MyWidget::mousePressEvent(QMouseEvent *event) { // 设置光标为十字光标 QApplication::setOverrideCursor(Qt::SizeAllCursor); // 处理鼠标按下事件 // ... } ``` 当鼠标按下时，光标将会变为十字光标，表示可以调整控件大小。当释放鼠标时，你可以使用QApplication::restoreOverrideCursor()方法将光标恢复为默认值，如下所示： ``` void MyWidget::mouseReleaseEvent(QMouseEvent *event) { // 恢复默认光标 QApplication::restoreOverrideCursor(); // 处理鼠标释放事件 // ... } ``` 这样，当鼠标释放时，光标将会恢复为默认值，表示操作结束。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值