mouseover 和 mouseenter的区别

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

mouseover mouseenter mouseleave mouseout

打开边栏(ESC) 关闭边栏(ESC)

mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave
mouseover和mouseenter的异同体现在两个方面：
1. 是否支持冒泡
2.事件的触发时机

运行下面的代码，我们可以直观的发现两者的区别：

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .father {
        /* margin: 100px auto; */
        width: 500px;
        height: 500px;
        background-color: pink;
      }
 
      .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        /* transform: translateX(-50px); */
      }
    </style>
  </head>
 
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
 
    <script>
      let father = document.querySelector('.father')
      let son = document.querySelector('.son')
      // 事件捕获
      // mouseenter——不支持事件冒泡
    //   father.addEventListener('mouseenter', function() {
    //     console.log('father-mouseenter')
    //   })
 
    //   son.addEventListener('mouseenter', function(e) {
    //     // e.stopPropagation()
    //     console.log('son-mouseenter')
    //   })
 
      // mouseover——支持事件冒泡
      father.addEventListener('mouseover', function() {
        console.log('father-mouseover')
      })
 
    //   son.addEventListener('mouseover', function(e) {
    //     // e.stopPropagation()
    //     console.log('son-mouseover')
    //   })
    </script>
  </body>
</html>

mouseenter事件的情况：
当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。而鼠标本身在元素边界内时，要触发该事件，必须先将鼠标移出元素边界外，再次移入才能触发。

mouseover事件的情况：
当鼠标从元素的边界之外移入元素的边界之内时，事件被触发。如果移到父元素里面的子元素，事件也会被触发

所以我们在使用鼠标经过事件一般会使用
mouseenter 和 mouseleave 没有冒泡效果(推荐)
而mouseover 和 mouseout 会有冒泡效果

赏

前一篇

JS的sort排序方法

后一篇

JS取整数汇总

相关推荐

return和return false的区别

JavaScript | 2020-08-26 18837

1. return返回null，起到中断方法执行的效果，只要不return false事件处理函数将会继续执行，表单将提交 2. return false，事件处理函数会取消事件，不再继续向下执行。比如表单将终止提交。 <script> function validateForm(){ var username...

console.log怎样输出换行

JavaScript | 2020-04-17 13649

两个console.log()之间默认是换行的，不用单独处理，如果想输出换行，可以用 console.log( '\n' ); 其他内容如果同时打印数字和字符串，并且数字在前，打印字符串会添加引号显示。 console.log('test',1) ==》test 1 console.log(1,'test') ...