整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

一文详解Javascript鼠标事件,拖拽原理

一文详解Javascript鼠标事件,拖拽原理

见鼠标事件

对鼠标进行操作就会产生鼠标事件,比如按下、松开鼠标左键、右键或滚轮等。

onmousemove事件:当鼠标指针在指定元素上移动时,就会触发该事件。

<!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>
        #box{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>

    <script>
        let box=document.getElementById("box");

        box.onmousemove=function(){
            box.style.backgroundColor="red";
        }
    </script>
</body>
</html>

当鼠标移动到div方形区域内,背景颜色变为红色。

onmousedown事件:当鼠标指针移动到指定元素上并按下,会触发该事件。

let box=document.getElementById("box");

box.onmousedown=function(){
    box.style.backgroundColor="red";
}

onmouseup事件:当鼠标指针移动到指定元素上按下并离开,会触发该事件。

let box=document.getElementById("box");

box.onmousedown=function(){
    box.style.backgroundColor="red";
}

box.onmouseup=function(){
    box.style.backgroundColor="green";
}

createElement()方法

createElement():通过指定名称创建一个元素。

项目目标:

在输入框输入非空内容,自动添加到下方列表。

let list=document.getElementById("list");
let word=document.getElementById("word");

let arr=["吃饭", "睡觉", "打豆豆"];
for (let i=0; i < arr.length; i++) {
	let temp=document.createElement("li");
	temp.innerHTML=arr[i];
	list.append(temp);
}
word.onblur=function() {
	let value=word.value;
	conssole.log(value);
	if(value){
		let temp=document.createElement("li");
		temp.innerHTML=value;
		list.append(temp);
	}
	else
		alert("请输入内容");
}

event对象

在事件被触发时,js会自动生成一个event对象,控制台输出event可以查看这个事件的具体信息。

项目目标:浏览器中有一个红色小球,鼠标点击,小球就会移动到点击的位置。

let box=document.getElementById("box");
document.onclick=function(event) {
	let x=event.clientX;
	let y=event.clientY;
	box.style.left=x + "px";
	box.style.top=y + "px";
}

拖拽效果

移动时disX和disY没有变化:

项目目标:拖动纸飞机移动。

let img=document.getElementById("img");
img.onmousedown=function (event) {
    let disX=event.clientX - this.offsetLeft;
    let disY=event.clientY - this.offsetTop;
    img.onmousemove=function (event) {
        let l=event.clientX - disX;
        let t=event.clientY - disY;

        this.style.left=l + 'px';
        this.style.top=t + 'px';
    }
    img.onmouseup=function () {
        img.onmouseup=img.onmousemove=null;
    }
}

视频讲解

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

相关推荐

  • Javascript对象和选项卡实现
  • 一文详解javascript轮播图
  • Javascript简介和基础数据类型
  • 一文详解Javascript定时器
  • Javascript点击按钮控制图片切换
  • Javascript获取className属性和slice切片
  • 一文详解Javascript正则表达式,检测用户名密码合法性
  • Javascript在线刷题输入输出模板,学编程为什么要刷题?

Dom多个事件绑定addEventListener():

addEventListener()

- 也可以通过addEventListener()来为元素绑定事件

addEventListener(type, listener [, useCapture])

- 参数:

type 要监听的事件的字符串,注意这里不需要写on

listener 回调函数,当事件发生后调用的函数

useCapture 布尔值,是否在捕获阶段触发事件,一般都是false

通过addEventListener()可以为一个元素的一个事件绑定多个响应函数,

这样当事件被触发时,响应函数会按照事件的绑定顺序依次执行

该方法不支持IE8及以下的浏览器

通过addachEvent()可以为一个元素的相同事件绑定多个响应函数 该方法支持IE8以下的浏览器—两个参数addachEvent (on事件,回调函数)

不同的是—先绑定的后执行,后绑定的先执行!

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件的绑定</title>

<script>

window.onload=function () {

var btn01=document.getElementById('btn01');

// 通过 对象.属性 的形式绑定响应函数时,同时只能为一个事件绑定一个响应函数

// btn01.onclick=function () {

// alert(1);

// };

//

btn01.onclick=function () {

alert(2);

};

btn01.onclick=null;

/*

addEventListener()

- 也可以通过addEventListener()来为元素绑定事件

addEventListener(type, listener [, useCapture])

- 参数:

type 要监听的事件的字符串,注意这里不需要写on

listener 回调函数,当事件发生后调用的函数

useCapture 布尔值,是否在捕获阶段触发事件,一般都是false

通过addEventListener()可以为一个元素的一个事件绑定多个响应函数,

这样当事件被触发时,响应函数会按照事件的绑定顺序依次执行

该方法不支持IE8及以下的浏览器

通过addachEvent()可以为一个元素的相同事件绑定多个响应函数 该方法支持IE8以下的浏览器—两个参数addachEvent (on事件,回调函数)

不同的是—先绑定的后执行,后绑定的先执行!

*/

// btn01.addEventListener("click",function () {

// alert(1);

// }, false)

//

// btn01.addEventListener("click",function () {

// alert(2);

// }, false)

//

// btn01.addEventListener("click",function () {

// alert(3);

// }, false)

// btn01.removeEventListener()

/*

removeEventListener(type, listener[, useCapture]);

- 用来移除元素上的事件监听器

*/

function fn() {

alert(123);

}

btn01.addEventListener('click',fn, false);

btn01.removeEventListener('click', fn, false);

};

</script>

</head>

<body>

<button id="btn01">点我一下</button>

</body>

</html>

2DOM事件的捕获:

关于事件的传播方向当时两大巨头网景和微软有着不同的理解:

网景公司认为事件应该由外向内传递,

事件发生时,应该先从外层元素上的事件,然后向内一层一层传递

这一事件的传播机制,称为 事件的捕获

微软公司认为事件应该由内向外传递

事件发生时,应该先从内层元素(触发事件的元素)开始,然后一层一层传递

这一事件的传播机制,称为 事件的冒泡

于是W3C将事件整个分为了三个阶段:

1.捕获阶段

- 事件发生后首先从外层元素向内层元素进行事件的捕获

- 默认情况下此阶段并不会触发事件

通常在捕获阶段不想触发事件--可以将addEventListener()的第三个参数设置为false

- 如果希望在捕获阶段触发事件,可以将addEventListener()的第三个参数设置为true

2.目标阶段

- 捕获到达触发事件的元素,捕获终止

3.冒泡阶段

- 从触发事件的元素开始,向外层进行事件的冒泡,并触发事件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#box1{

width: 300px;

height: 300px;

background-color: #bfa;

}

#box2{

width: 150px;

height: 150px;

background-color: #ff0;

}

#box3{

width: 50px;

height: 50px;

background-color: orange;

}

</style>

<script>

window.onload=function () {

/*

关于事件的传播方向当时两大巨头网景和微软有着不同的理解:

网景公司认为事件应该由外向内传递,

事件发生时,应该先从外层元素上的事件,然后向内一层一层传递

这一事件的传播机制,称为 事件的捕获

微软公司认为事件应该由内向外传递

事件发生时,应该先从内层元素(触发事件的元素)开始,然后一层一层传递

这一事件的传播机制,称为 事件的冒泡

于是W3C将事件整个分为了三个阶段:

1.捕获阶段

- 事件发生后首先从外层元素向内层元素进行事件的捕获

- 默认情况下此阶段并不会触发事件

通常在捕获阶段不想触发事件--可以将addEventListener()的第三个参数设置为false

- 如果希望在捕获阶段触发事件,可以将addEventListener()的第三个参数设置为true

2.目标阶段

- 捕获到达触发事件的元素,捕获终止

3.冒泡阶段

- 从触发事件的元素开始,向外层进行事件的冒泡,并触发事件

*/

//分别为三个元素绑定单击响应函数

var box1=document.getElementById('box1');

var box2=document.getElementById('box2');

var box3=document.getElementById('box3');

box1.addEventListener('click',function () {

alert(1);

}, true); //传false 就不会在捕获阶段触发

box2.addEventListener('click',function () {

alert(2);

}, true);

box3.addEventListener('click',function () {

alert(3);

}, true);

};

</script>

</head>

<body>

<div id="box1">

<div id="box2">

<div id="box3"></div>

</div>

</div>

</body>

</html>

3鼠标拖拽div案例:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#box1{

width: 100px;

height: 100px;

background-color: #f00;

position: absolute;

}

#box2{

width: 100px;

height: 100px;

background-color: orange;

}

#box3{

width: 100px;

height: 100px;

background-color: yellow;

}

#box4{

width: 100px;

height: 100px;

background-color: tomato;

}

.drag{

position: absolute;

}

</style>

<script>

window.onload=function () {

//获取box1对象

var box1=document.getElementById('box1');

// 创建一个变量,记录拖拽的状态

//var isDrag=false; // 默认拖拽没有开始

var left, top;

// 创建一个变量,记录被拖拽的对象

var dragEle=null;

//为box1绑定鼠标按下的事件

document.addEventListener('mousedown',function (ev) {

// alert(ev.button);

// button用来表示鼠标的按钮 0表示左键 1表示滚轮按下 2表示右键

// 判断元素是否是拖拽元素

if(ev.target.classLisr.contains('drag')==='drag' && ev.button===0){

// 开始拖拽 将isDrag设置为true

// isDrag=true;

// 将ev.target 赋值给dragEle

dragEle=ev.target;

// 取消默认行为

ev.preventDefault();

// 获取鼠标和元素的距离

left=ev.offsetX;

top=ev.offsetY;

}

}, false);

// 开始拖拽 , 为document绑定一个鼠标移动的事件

document.addEventListener('mousemove',function (ev) {

if(dragEle){

dragEle.style.left=ev.clientX - left +'px';

dragEle.style.top=ev.clientY - top + 'px';

}

}, false);

//设置onmouseup来停止拖拽

document.addEventListener('mouseup', function (ev) {

// 将 isDrag 设置为false,停止拖拽

// isDrag=false;

dragEle=null;

});

};

</script>

</head>

<body>

<div id="box1" class=""></div>

<div id="box2" class="drag"></div>

<div id="box3" class="drag"></div>

<div id="box4" class="drag"></div>

<img src="an.jpg" class="drag">

</body>

</html>

4.js读取元素的class属性:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.box1{

width: 100px;

height: 100px;

background-color: #bfa;

}

.hello{

width: 200px;

height: 200px;

background-color: #ff0;

}

</style>

<script>

window.onload=function () {

var box1=document.querySelector('.box1');

// 使用className获取的元素的class值,就是原本的class值

// 例如:box1.className 是这样的 box1 box2 box3 box4

// classList 是一个类数组对象,在它里边将元素的每一个class属性都设置为了数组中的一个元素

/*

自己实现一组类相关的方法,要求兼容IE8以上的浏览器

classList只支持IE10以上的浏览器

contains() 用来检查classList是否含有某个类,如果有返回true,没有返回false

add() 用来向元素中添加一个或多个class

remove() 移除元素中的一个或多个class

replace() 使用一个新的class替换元素中的class

toggle() 切换元素中的指定class,如果有则删除,如果没有则添加

*/

var btn01=document.getElementById('btn01');

btn01.addEventListener('click',function () {

// alert(box1.classList.contains('hello'));

// box1.classList.add('hello');

// box1.classList.remove('box1');

// box1.classList.replace('box1', 'hello');

box1.classList.toggle('hello');

},false)

};

</script>

</head>

<body>

<button id="btn01">点我一下</button>

<div class="box1 box2 box3 box4"></div>

</body>

</html>

5鼠标右键的事件contextmenu:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>鼠标事件</title>

<style>

*{

margin: 0;

padding: 0;

}

.menu{

width: 200px;

position: absolute;

background-color: #bfa;

list-style: none;

display: none;

}

.menu li:hover{

background-color: #ff0;

}

</style>

<script>

//contextmenu 表示右键菜单的事件

document.addEventListener("contextmenu",function (ev) {

// 如果取消了contextmenu的默认行为,将会导致右键菜单不会出现

ev.preventDefault();

// 将菜单显示出来

var menu=document.querySelector('.menu');

menu.style.display='block';

menu.style.left=ev.clientX + 'px';

menu.style.top=ev.clientY + 'px';

},false);

document.addEventListener('click',function () {

var menu=document.querySelector('.menu');

menu.style.display='none';

},false)

</script>

</head>

<body>

<ul class="menu">

<li>菜单一</li>

<li>菜单二</li>

<li>菜单三</li>

<li>菜单四</li>

<li>菜单五</li>

<li>菜单六</li>

<li>菜单七</li>

</ul>

</body>

</html>

6鼠标滚轮的事件wheel:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#box1{

width: 100px;

height: 100px;

background-color: #f00;

}

</style>

<script>

window.onload=function () {

/*

box1可以根据鼠标滚轮滚动的方向变长或变短

*/

// 获取box1

var box1=document.getElementById('box1');

box1.addEventListener('wheel',function (ev) {

// alert(ev);

//wheel 事件会在鼠标滚轮滚动的时候触发

// deltaX 获取鼠标滚轮横向滚动方向

// 向左拨-3 向右拨3

// 左-100 右100(Chrome)

// deltaY 获取鼠标滚轮纵向滚动方向

// 上-3 下3

// 上-100 下100

// 如果滚轮向下滚,box1变长

if(ev.deltaY > 0){

box1.style.height=box1.clientHeight + 10 + 'px';

}else{

// 如果滚轮向上滚,box1变短

box1.style.height=box1.clientHeight - 10 + 'px';

}

},false)

};

</script>

</head>

<body>

<div id="box1"></div>

</body>

</html>

7 class属性更改替换(兼容IE8):

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.box1{

width: 100px;

height: 100px;

background-color: #bfa;

margin-top: 50px;

}

.yellow{

width: 200px;

height: 200px;

background-color: #ff0;

}

</style>

<script>

window.onload=function () {

var btn=document.getElementById('btn');

var box1=document.querySelector('.box1');

btn.addEventListener('click',function () {

replaceClass(box1, 'yellowgreen', 'yellow');

// alert(hasClass(box1,'box1'));

// toggleClass(box1, 'yellow');

// addClass(box1, 'yellow');

// 修改box1的样式

// box1.style.width='300px';

// box1.style.height='300px';

// box1.style.backgroundColor='yellowgreen';

// 检查className中是否含有yellow,然后在添加

// var re=new RegExp("\\byellow\\b")

// if(!re.test(box1.className)){

// // 将box1的class属性修改为yellow

// box1.className +=' '+'yellow';

// }

// /\byellow\b/

// var reg=/\byellow\b/;

// 使用构造函数创建一个正则

// reg=new RegExp("\\byellow\\b"); // /\byellow\b/

// alert(reg);

},false)

};

//定义一个函数,用来为任意的元素添加class

// ele 表示要添加样式的元素

// className 表示要添加的class

function addClass(ele, className) {

if(!hasClass(ele,className)){

// 将box1的class属性修改为yellow

ele.className +=' '+className;

}

}

// 定义一个函数用来检查类中是否含有某个class

function hasClass(ele, className) {

var re=new RegExp("\\b"+className+"\\b");

return re.test(ele.className);

}

// 删除元素的指定类

function removeClass(ele, className) {

// 根据className创建一个正则表达式

var re=new RegExp('\\s*\\b'+className+'\\b');

// 将ele.className中符合正则表达式的内容,替换为空串

ele.className=ele.className.replace(re, '');

}

// 切换class,如果元素中具有该class则删除,如果没有则添加

function toggleClass(ele, className) {

// 检查元素中是否含有该class

if(hasClass(ele, className)){

removeClass(ele, className);

}else{

addClass(ele, className);

}

}

// 替换元素class属性

function replaceClass(ele, oldCls, newCls) {

// 根据oldCls创建一个正则表达式

var re=new RegExp('\\b'+oldCls+'\\b');

// 将ele.className中符合re的内容替换为newCls

ele.className=ele.className.replace(re, newCls);

}

</script>

</head>

<body>

<button id="btn">点我一下</button>

<div class="box1 yellowgreen"></div>

</body>

</html>



欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

#2023年度创作挑战#

家好,今天给大家介绍一款, css3实现的鼠标悬停图片响应特效html页面源码,(图1)。送给大家哦,获取方式在本文末尾。

图1

一共实现了6种特效(图2-图7)

图2

图3

图4

图5

图6

图7

源码完整,需要的朋友可以下载学习(图8)

图8

本源码编码:10174,需要的朋友,点击下面的链接后,搜索10174,即可获取。

就爱UI - 分享UI设计的点点滴滴