mouseover 和 mouseenter的区别
web JavaScript 2023-02-27 648 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

6765004 2630 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(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     会有冒泡效果

版权声明:本篇文章来源于网络。 来源链接

相关推荐
return和return false的区别
JavaScript | 2020-08-26 19334
1. return返回null,起到中断方法执行的效果,只要不return false事件处理函数将会继续执行,表单将提交 2. return false,事件处理函数会取消事件,不再继续向下执行。比如表单将终止提交。 <script> function validateForm(){ var username...
console.log怎样输出换行
JavaScript | 2020-04-17 14055
两个console.log()之间默认是换行的,不用单独处理,如果想输出换行,可以用 console.log( '\n' ); 其他内容 如果同时打印数字和字符串,并且数字在前,打印字符串会添加引号显示。 console.log('test',1) ==》test 1 console.log(1,'test') ...
评论:0条
评论加载中...
发表评论
后一篇: