整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          一文詳解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設計的點點滴滴
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产午夜精品一区二区三区嫩草|
国产精品小黄鸭一区二区三区|
本免费AV无码专区一区|
中文字幕一区日韩在线视频|
少妇无码一区二区二三区|
国产精品一区不卡|
91成人爽a毛片一区二区|
欧洲精品一区二区三区在线观看|
国产视频一区二区在线播放|
在线播放精品一区二区啪视频|
久久成人国产精品一区二区|
无码少妇丰满熟妇一区二区|
亚洲国产精品乱码一区二区|
无码欧精品亚洲日韩一区夜夜嗨|
亚洲午夜精品一区二区公牛电影院
|
日韩精品一区二区三区中文3d|
中文字幕人妻无码一区二区三区|
国产一区二区三区在线|
无码中文字幕人妻在线一区二区三区|
中文字幕精品无码一区二区三区|
在线视频精品一区|
免费精品一区二区三区在线观看|
无码国产精品一区二区免费vr
|
精品黑人一区二区三区|
美女啪啪一区二区三区|
91国在线啪精品一区|
丰满人妻一区二区三区视频53|
精品国产福利在线观看一区|
亚洲性无码一区二区三区|
中文字幕在线看视频一区二区三区|
精品视频一区二区三区四区五区|
国产一区在线视频观看|
夜夜爽一区二区三区精品|
日韩精品无码人妻一区二区三区|
国产成人一区二区三区电影网站
|
91在线精品亚洲一区二区|
精品一区精品二区制服|
中文字幕日韩一区二区不卡|
无码人妻精一区二区三区|
国产aⅴ一区二区|
综合人妻久久一区二区精品
|