前端的事件冒泡（例如點擊一次onclick事件執行兩次）解決辦法

cnsworder 發布于2019-08-01 18:01 / 2006人閱讀

摘要：舉個例子可以看到你就算賦予了和前端頁面渲染也是不正常的無論賦成什么結果都是但是我還需要對他進行一些操作需要綁定他的事件所以我得解決辦法就是在標簽外套了一層綁定了屬性，同時將事件綁定在這層上。

問題概要：

當我運用antd 中 radio組件的時候發現radio組件是有bug的就是你不能給他賦予id 和 value，同時也綁定不上onclick等事件。
舉個例子：

可以看到你就算賦予了id 和value 前端頁面渲染也是不正常的 value無論賦成什么結果都是on
但是我還需要對他進行一些操作需要綁定他的onclick事件所以我得解決辦法就是在radio標簽外套了一層div 綁定了id屬性，同時將onclick事件綁定在這層div上。當我們觸發它時，通過jQuery的子選擇器找到內部radio。但是這樣做問題又來了就是這篇文章的主題 事件冒泡
簡單來說，就是因為點擊label的時候，會觸發套在其內部的的input的click事件，導致事件再次觸發
解決辦法就是：

 $("label").click(function (e) {
     if ($(e.target).is("input"))
     return;
});

2018-2-28日更：
其實更應該從思路上解決問題，當發生事件冒泡時，我們是否可以將這兩個引起問題的dom節點分開成兩個div來進行處理，而不是通過js控制。
參考鏈接：http://blog.csdn.net/qazwsx33...

云服務器 GPU云服務器點擊事件執行php js點擊事件重復執行冒泡事件事件冒泡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51527.html

前端小知識--JavaScript事件流

摘要：事件事件指可以被偵測到的行為。事件通常與函數配合使用，當事件發生時函數才會執行。兩家公司對于事件流出現了截然相反的定義。級事件規定的事件流包括三個階段事件捕獲階段處于目標階段事件冒泡階段。我們又把事件處理程序稱為事件偵聽器。 JavaScript事件流 0.DOM級別與DOM事件首先在介紹DOM事件之前我們先來認識下DOM的不同級別。針對不同級別的DOM，我們的DOM事件處理方式也是...

Taste 2019-08-26 11:43 評論0 收藏0
FastClick 源碼解讀

摘要：所有瀏覽器瀏覽器不支持安卓中中有屬性安卓中中有屬性有屬性的有屬性的所以在不需要的瀏覽器會直接掉，不會執行下面的所有代碼。見源碼行，可以看出在響應無操作后，則觸發。其實一直就想花些時間讀一讀那些優秀的開源庫，今天終于下了決定打算死磕下自己，2016年每個月讀2-3個優秀的開源庫，把源碼精彩的地方和自己心得分享給大家。目錄（一）背景（二）源碼解析（三）Zepto 點擊穿透與 Fast...

Chaz 2019-08-19 17:24 評論0 收藏0
js高級程序設計-事件處理-閱讀筆記

摘要：事件流事件流是指從頁面接受事件的順序一般考慮兼容性問題會使用冒泡而不適用捕獲事件冒泡事件開始時由具體的元素嵌套層次最深的元素接受然后逐級向上傳播到文檔事件捕獲基本跟事件冒泡相反事件捕獲用于在于事件到達預定目標之前捕獲他首先接收到事件然后事件事件流事件流是指從頁面接受事件的順序showImg(https://segmentfault.com/img/bVIf9T?w=540&h=48...

Anshiii 2019-08-20 13:46 評論0 收藏0
理解Javascript中的事件綁定與事件委托

摘要：最近在深入實踐中，遇到了一些問題，比如我需要為動態創建的元素綁定事件，那么普通的事件綁定就不行了，于是通過上網查資料了解到事件委托，因此想總結一下中的事件綁定與事件委托。事件冒泡認為事件促發的最深層元素首先接收事件。最近在深入實踐js中，遇到了一些問題，比如我需要為動態創建的DOM元素綁定事件，那么普通的事件綁定就不行了，于是通過上網查資料了解到事件委托，因此想總結一下js中的事件綁...

lewinlee 2019-08-20 10:23 評論0 收藏0
JS基礎篇--事件綁定及深入

摘要：學習要點傳統事件綁定的問題事件處理函數事件處理函數事件對象的其他補充事件綁定分為兩種一種是傳統事件綁定內聯模型，腳本模型，一種是現代事件綁定級模型。現代事件綁定在傳統綁定上提供了更強大更方便的功能。事件和事件事件和事件，有關加載方面的事件。學習要點： 1.傳統事件綁定的問題2.W3C事件處理函數3.IE事件處理函數4.事件對象的其他補充事件綁定分為兩種：一種是傳統事件綁定（內聯模型...

yearsj 2019-08-19 17:47 評論0 收藏0