onmouseover 、onmouseout 与onmouse
2019-08-04 本文已影响0人
ChooAcc
| 属性 | 描述 |
|---|---|
| onmouseenter | 当鼠标指针移动到元素上时触发。 |
| onmouseleave | 当鼠标指针移出元素时触发 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseout | 鼠标从某元素移开。 |
文档内容来自菜鸟教程
以下列嵌套容器为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.external {
width: 600px;
height: 600px;
background-color: red;
margin: 0 auto;
}
.interval {
width: 300px;
height: 300px;
background-color: black;
}
</style>
</head>
<body>
<div class="external">
<div class="interval">
</div>
</div>
<script type="text/javascript">
let external = document.getElementsByClassName('external')[0]
external.onmouseenter = function () {
console.log('父-enter')
}
external.onmouseleave = function () {
console.log('父-leave')
}
external.onmouseout = function () {
console.log('父-out')
}
external.onmouseover = function () {
console.log('父-over')
}
</script>
</body>
</html>
所有事件都绑定到父元素中，它们之间的关系为：
- onmouseenter、onmouseleave：鼠标只有在父元素与外界之间移入移出才会触发。即当第一次从外界移入父元素时触发onmouseenter事件，接着再移入子元素时不触发；从子元素中移除到父元素时也不触发onmouseleave事件，直到移出父元素到达外界才触发。
- onmouseover、onmouseout：鼠标在父元素和子元素中都会触发。
图例：
各个事件比较.gif
根据这几个事件的特性，可实现以下功能，如图所示：
示例
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例</title>
<style type="text/css">
.external {
width: 600px;
height: auto;
background-color: red;
margin: 0 auto;
}
.external1 {
background-color: #003cff;
}
.btn {
float: right;
margin: 10px;
visibility: hidden;
}
.btn1 {
visibility: visible;
}
.btn2 {
background-color: #28c121;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="external">
<button type="button" class="btn">按钮</button>
<div class="clear"></div>
</div>
<script type="text/javascript">
/**
* 添加样式类名
* @param obj 目标元素
* @param cn 指定的样式类
*/
function addClass (obj, cn) {
// 先判断是否含有该样式类，有则加进去，没有则不加
if(!hasClass(obj, cn)){
obj.className += ' ' + cn
}
}
/**
* 判断是否含有指定的样式类
* @param obj 目标元素
* @param cn 指定的样式类
* @returns {boolean} true表示有；false表示没有；
*/
function hasClass (obj, cn) {
// 定义正则表达式
const reg = new RegExp("\\b" + cn + "\\b")
// 判断是否含有传进来的样式类
return reg.test(obj.className)
}
/**
* 删除指定的样式类
* @param obj 目标元素
* @param cn 指定样式类
*/
function removeClass (obj, cn) {
// 定义正则表达式
const reg = new RegExp("\\b" + cn + "\\b")
// 删除class
obj.className = obj.className.replace(reg, "")
}
// 获取元素
let external = document.getElementsByClassName('external')[0]
let btn = document.getElementsByClassName('btn')[0]
// 设置监听函数
external.onmouseenter = function () {
// 给容器添加样式
addClass(external, "external1")
// 给按钮添加样式
addClass(btn, "btn1")
}
external.onmouseleave = function () {
// 删除样式
removeClass(this, "external1")
removeClass(btn, "btn1")
}
btn.onmouseenter = function () {
// 添加样式
addClass(this, "btn2")
}
btn.onmouseleave = function () {
// 删除样式
removeClass(this, "btn2")
}
</script>
</body>
</html>
最后程序小白的我弱弱的问一句，鼠标和鼠标指针区别是啥？我看菜鸟教程文档写着鼠标和鼠标指针表示不解，望知道的大神在评论指导一下，万分感谢。
