首頁 web前端 js教程 扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁_jquery

扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁_jquery

May 16, 2016 pm 05:58 PM
子元素

解决思路如下:
首先,判断事件的当前节点,也就是jquery的currentTarget是否在target的包含中,即下面的扩展$.containsNode。
然后,在调用hover的时候的mouseover和mouseout事件里判断currentTarget是否在target的包含中,即$.fn.fhover扩展
下面就是相关代码:
复制代码 代码如下:

$.containsNode = function(parentNode, childNode) {
if (parentNode.contains) {
return parentNode != childNode && parentNode.contains(childNode);
} else {
return !!(parentNode.compareDocumentPosition(childNode) & 16);
}
}
$.fn.fhover = function(over, out) {
this.hover(function(e) {
if ($.containsNode(e.target, e.currentTarget)) {
return;
}
over.call(this, e);
}, function(e) {
if ($.containsNode(e.target, e.currentTarget)) {
return;
}
out.call(this, e);
});
return this;
}
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在jQuery中刪除最後一個子元素? 如何在jQuery中刪除最後一個子元素? Feb 19, 2024 pm 09:40 PM

jQuery是一個流行的JavaScript庫,用於簡化Web開發中的許多任務,包括DOM操作。在網頁開發中,經常需要對DOM元素進行增刪改查的操作,其中刪除最後一個子元素也是常見需求。本文將介紹使用jQuery刪除最後一個子元素的幾種方法。方法一:使用last()方法jQuery提供了last()方法,可以選取目前查詢結果的最後一個元素。透過結合這個方

了解事件冒泡機制:為何子元素的點擊會影響父元素的事件? 了解事件冒泡機制:為何子元素的點擊會影響父元素的事件? Jan 13, 2024 pm 02:55 PM

理解事件冒泡:為什麼子元素的點擊會觸發父元素的事件?事件冒泡是指在一個嵌套的元素結構中,當子元素觸發某個事件時,該事件會像冒泡一樣逐層傳遞到父元素,直到最外層的父元素。這種機制使得子元素的事件可以在整個元素樹中傳遞,並依序觸發所有相關的元素。為了更好地理解事件冒泡,讓我們來看一個具體的範例程式碼。 HTML程式碼:<divid="parent&q

使用:nth-child(n+3)偽類選擇器選擇位置大於等於3的子元素的樣式 使用:nth-child(n+3)偽類選擇器選擇位置大於等於3的子元素的樣式 Nov 20, 2023 am 11:20 AM

使用:nth-child(n+3)偽類選擇器選擇位置大於等於3的子元素的樣式,具體程式碼範例如下:HTML程式碼:&lt;divid="container"&gt;&lt;divclass="item"&gt ;第一個子元素&lt;/div&gt;&lt;divclass="item"&

使用jQuery刪除元素的最後一個子元素 使用jQuery刪除元素的最後一個子元素 Feb 26, 2024 pm 12:39 PM

如何使用jQuery刪除最後一個子元素?在前端開發中,常會遇到需要對頁面元素進行增刪改查的操作。其中,刪除最後一個子元素是一個常見的需求。本文將介紹如何使用jQuery來刪除最後一個子元素,並附上具體的程式碼範例。首先,我們需要在頁面中引入jQuery庫,確保能夠使用其中的功能。在HTML檔案中加入以下程式碼:&lt

使用:nth-child偽類選擇器選擇特定位置的子元素的CSS樣式 使用:nth-child偽類選擇器選擇特定位置的子元素的CSS樣式 Nov 20, 2023 pm 04:43 PM

使用:nth-child偽類選擇器選擇特定位置的子元素的CSS樣式在CSS中,偽類選擇器是用來選擇HTML文件中特定狀態的元素。除了常見的偽類選擇器如:hover和:active,還有一個非常有用的偽類選擇器是:nth-child,它允許我們選擇特定位置的子元素。 :nth-child偽類別選擇器的語法如下:父元素:nth-child(n)其中父元素代表父級元素

如何利用jQuery判斷元素是否包含子元素 如何利用jQuery判斷元素是否包含子元素 Feb 28, 2024 am 11:03 AM

如何利用jQuery判斷元素是否包含子元素在網頁開發中,常常會遇到需要判斷一個元素是否包含子元素的情況。使用jQuery可以非常方便地實現這個功能。在本文中,將介紹如何利用jQuery判斷一個元素是否包含子元素,並給出具體的程式碼範例。在jQuery中,可以使用children()方法來選擇指定元素的所有直接子元素。如果一個元素包含子元素,那麼就使用childr

jQuery實作判斷元素是否存在子元素功能 jQuery實作判斷元素是否存在子元素功能 Feb 28, 2024 pm 12:54 PM

jQuery是一個廣泛應用於前端開發的JavaScript庫,它提供了簡潔而強大的API,可以方便地操作DOM元素。在實際開發中,有時候我們需要判斷一個元素是否包含子元素,這時就需要使用jQuery來實作。要判斷一個元素是否存在子元素,我們可以利用jQuery提供的方法來實作。以下是一個範例程式碼,示範如何使用jQuery來判斷一個元素是否包含子元素:&lt

jQuery實例:如何利用jQuery刪除最後一個子元素? jQuery實例:如何利用jQuery刪除最後一個子元素? Feb 20, 2024 pm 07:45 PM

標題:jQuery實例:如何利用jQuery刪除最後一個子元素?在Web開發中,經常會遇到需要透過JavaScript操作DOM元素的情況。而jQuery作為一個廣泛使用的JavaScript函式庫,提供了許多方便的方法來操作DOM元素。本文將透過一個實例來介紹如何利用jQuery刪除最後一個子元素的方法,並提供詳細的程式碼範例。首先,我們需要在HTML檔案中引入

See all articles