React開發(fā) 獲取不到當前觸發(fā)事件的元素

williamwen1986 發(fā)布于2019-08-19 18:27 / 1544人閱讀

摘要：到這里就要另外辦法了，看下面的代碼拿到當前觸發(fā)事件的元素跑一遍，還是不行。。。去查了一下對象屬性方法返回其事件監(jiān)聽器觸發(fā)該事件的元素。返回觸發(fā)此事件的元素事件的目標節(jié)點。事件綁定的元素。

應用場景：一組列表，需獲取當前觸發(fā) onClick 事件元素上的 data-key ；

就一個事件冒泡導致的問題；
初步?jīng)]解決方案是給 li 下的所有子元素都加上 data-key
顯然這是很很很笨的方法，僅為當時測試用。

實在不行，其他地方也要解決這個問題
就停下腳步

得深挖下，事件捕捉/冒泡的過程（有空補全）

既然是子元素冒泡上來了，就得去子元素下阻止冒泡
想了5秒，子元素下要有100個元素且不是。。。。。

到這里就要另外辦法了，看下面的代碼：

handleMsglistStar(e){
    console.log(e.currentTarget);  //拿到當前觸發(fā) onClick事件的元素      
    e.stopPropagation();
    e.preventDefault();
}

跑一遍，還是不行。。。
去查了一下 JavaScript event對象屬性方法

currentTarget 返回其事件監(jiān)聽器觸發(fā)該事件的元素。

target 返回觸發(fā)此事件的元素（事件的目標節(jié)點）。

target 觸發(fā)事件的元素。盡管事件是綁定在 li 上的，點 div.item-content 觸發(fā)的就是 div.item-content。

currentTarget 事件綁定的元素。事件綁定在 li 不管你點誰觸發(fā)的總是 li

解決無法獲取到當前觸發(fā)事件的元素

handleMsglistStar(e){
    console.log(e.currentTarget)
    console.log(e.currentTarget.getAttribute("data-key"))
    //這樣就能拿到綁定在 li 上的信息了
}

{this.props.textList.map(item => (
    
        
            
            
        
    
))}

結(jié)語：反正我目前找到的最好的解決方法，匆匆忙忙下班時間搞個文章記錄；不太全面，有些東西一筆過，遇到過這個問題的，一看就能明白，如有不正之處，歡迎指正。

GPU云服務器云服務器獲取當前的時間事件觸發(fā) 事件觸發(fā)器 java事件觸發(fā)

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79622.html

vue面試

摘要：雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導航跳轉(zhuǎn)，，等，一般用于頁面的修改。談談你對MVVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務邏輯都在Model層中定義；View 代表UI視圖，負責數(shù)據(jù)的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
5、React組件事件詳解

摘要：組件事件響應在構(gòu)建虛擬的同時，還構(gòu)建了自己的事件系統(tǒng)且所有事件對象和規(guī)范保持一致。的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比，主要增加了兩個特性事件代理和事件自動綁定。 React組件事件響應 React在構(gòu)建虛擬DOM的同時，還構(gòu)建了自己的事件系統(tǒng)；且所有事件對象和W3C規(guī)范保持一致。 React的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比，主要增加了兩個特性：事件代理、和事件自動綁定。 1、事件代理 ...

Ververica 2019-08-22 15:13 評論0 收藏0
Vue面試中，經(jīng)常會被問到的面試題/Vue知識點整理

摘要：可以在該鉤子中進一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。我工作中只用到，對和不怎么熟與的區(qū)別相同點都支持指令內(nèi)置指令和自定義指令都支持過濾器內(nèi)置過濾器和自定義過濾器都支持雙向數(shù)據(jù)綁定都不支持低端瀏覽器。看看面試題，只是為了查漏補缺，看看自己那些方面還不懂。切記不要以為背了面試題，就萬事大吉了，最好是理解背后的原理，這樣面試的時候才能侃侃而談。不然，稍微有水平的面試官一看就能看出，是...

mengbo 2019-08-23 11:54 評論0 收藏0
Vue_Vue權威指南

摘要：效率不高，很多多余，稱之為臟檢查。通過索引設置數(shù)組元素并觸發(fā)視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數(shù)據(jù)的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構(gòu)建數(shù)據(jù)驅(qū)動的Web界面的庫。 Vue通過簡單 API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng) 輕量數(shù)據(jù)綁定指令插件化架構(gòu)從傳統(tǒng)后臺MVC 向REST API + 前端MV*遷移DOM是數(shù)據(jù)的一種自然映...

SimonMa 2019-08-21 14:31 評論0 收藏0
最近遇到的前端面試題(2017.03.08更新版)

摘要：通過管理組件通信通過驅(qū)動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權。達到無刷新的效果。對象的狀態(tài)不受外界影響。對象代表一個異步操作，有三種狀態(tài)進行中已完成，又稱和已失敗。以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗整理后覺得更容易理解的解釋版本，歡迎補充。一. 輸入url后的加載過程從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么計算機...

linkFly 2019-08-21 11:35 評論0 收藏0