前端大部分事用鼠標(biāo)事件與用戶交互的孵稽,通過各種鼠標(biāo)事件的結(jié)合可以使用戶體驗升高镀层。
這里主要匯總一下大部分的鼠標(biāo)事件:
click事件于用戶在元素敲擊鼠標(biāo)左鍵丽声,并在相同元素上松開左鍵時觸發(fā)刹衫。
$('p').click(function(){
alert('clickfunction is running !');
});
(2)dbclick事件
dbclick事件在用戶完成迅速連續(xù)的兩次點擊之后觸發(fā)拴孤,雙擊的速度取決于操作系統(tǒng)的設(shè)置豆挽。一般雙擊事件在頁面中不經(jīng)常使用。
$('p').dbclick(function(){
alert('dbclickfunction is running !');
});
(3)mousedown事件
mousedown事件在用戶敲擊鼠標(biāo)鍵時觸發(fā)含蓉,跟keydown事件不一樣频敛,該事件僅在按下鼠標(biāo)時觸發(fā)。
$('p').mousedown(function(){
alert('mousedownfunction is running !');
});
(4)mouseup事件
mouseup事件在用戶松開鼠標(biāo)時觸發(fā)馅扣,如果在與按下鼠標(biāo)的元素相同元素上松開斟赚,那么click事件也會觸發(fā)。
$('p').mouseup(function(){
alert('mouseupfunction is running !');
}).click(function(){
alert('clickfunction is running too !');
});
(5)mouseover事件
mouseover事件于用戶把鼠標(biāo)從一個元素移動到另外一個元素上時觸發(fā)差油,如果需要知道來自那個元素可以使用拗军,relatedTagrget屬性。
(6)mouseout事件
mouseout事件于用戶把鼠標(biāo)移出一個元素時觸發(fā)蓄喇,這包括從父元素移動到子元素上发侵,或者使用鍵盤跳到元素上。
??(7)mouseenter事件
mouseenter事件是在用戶光標(biāo)進(jìn)入元素上時觸發(fā)妆偏。
$('p').mouseenter(function(){
alert('mouseenter function is running !');
});
(8)mouseleaver事件
mouseleaver事件是在用戶的光標(biāo)離開元素時觸發(fā)刃鳄。
$('p').mouseleaver(function(){
alert('mouseleaver function is running !');
});
重點說明:
1 mouseover與mousemove的區(qū)別:
mouseover是當(dāng)鼠標(biāo)移動到對象時產(chǎn)生,只產(chǎn)生一次钱骂,這時如果繼續(xù)在對象上移動叔锐,不會再產(chǎn)生mouseover事件,而是mousemove事件见秽,mousemove事件是當(dāng)鼠標(biāo)進(jìn)入對象后愉烙,如果在對象上不斷地移動,那么該事件會不斷地產(chǎn)生解取。
mouseOver 從父元素進(jìn)入子元素齿梁,從子元素進(jìn)入父元素都能觸發(fā)
2 mouseout事件
與mouseover相對,一個是進(jìn)入肮蛹,一個是出去勺择。離開子元素同樣可以觸發(fā)父元的mouseout事件
3 mousedown,mouseup事件
用戶鼠標(biāo)按下時觸發(fā)mousedown伦忠,再放開時觸發(fā)mouseup省核。
4 mousenter,mouseleave事件
只有當(dāng)鼠標(biāo)進(jìn)入綁定的元素時觸發(fā) mousenter不區(qū)分子元素
只有當(dāng)鼠標(biāo)離開綁定的元素時觸發(fā) mouseleave不區(qū)分子元素