React事件阻止瀏覽器預設行為/冒泡
阿新 • • 發佈：2018-12-29
React事件行為
React中無法用return false去阻止事件的預設響應行為
必須用
event.preventDefault();阻止瀏覽器預設行為， 例如標籤不跳轉
注： IE不認，在IE下需要用window.event.returnValue = false;
event.stopPropagation();阻止冒泡； 例如上級點選事件不生效
不是你想要的答案，也許你想看：
擴充套件事件物件的屬性：
1：通用屬性
- boolean bubbles : 事件是否可以冒泡
- boolean cancelable : 事件是否可以取消
- DOMEventTarget currentTarget :
- boolean defaultPrevented : 事件是否禁止預設行為
- number eventPhase : 事件所處的階段
- boolean isTrusted : 事件是否可信，可信事件即使用者自定義觸發的事件，不可信事件即用js程式碼觸發的事件
- DOMEvent nativeEvent 使用原生的瀏覽器發出的事件物件
- void preventDefault() : 禁止預設行為
- void stopPropagation() ： 禁止冒泡
- DOMEventTarget target:
- number timeStamp
- string type
2：不同事件物件特有的屬性
鍵盤事件：
- boolean altKey ; 是否按下alt鍵
- Number charCode ；按鍵的編碼; 字元編碼
- boolean ctrlKey ；是否按下ctrl鍵
- function getModifierState(key) ; 是否按下輔助按鍵ctrl,shift
- String key
- Number keyCode; 按鍵編碼；非字元
- String locale ; 本地化的字串
- Number location ；位置
- boolean metaKey; win鍵
- boolean repeat ；按鍵是否重複
- boolean shiftKey； 是否按下shift
- Number which ; 通用化的charCode和keyCode
焦點
- DOMEventTarget relatedTarget :
滑鼠事件
- boolean altKey；
- Number button；
- Number buttons；
- Number clientX;
- Number clientY; 當前滑鼠所處的座標, 頂點是瀏覽器視窗的左上角
- boolean ctrlKey
- function getModifierState(key);
- boolean metaKey;
- Number pageX
- Number pageY; 頂點時html頁面的左上角
- DOMEventTarget relatedTarget ;
- Number screenX；
- Number scrrenY; p
- boolean shiftKey;
觸控事件：
- boolean altKey
- DOMTouchList changedTouchs
- boolean ctrlKey
- function getModifierState(Key)
- boolean metaKey
- boolean shiftKey
- DOMTouchList targetTouches
- DOMTouchList touches
UI元素
- Number detail ： 滾動的距離
- DOMAbstractView view ： 檢視
滾動：
- Number deltaMode: 單位
- Number deltaX
- Number deltaY
- Number deltaZ 在座標軸上對應的位置