你能成为任何你想成为的人
0%

react监听点击事件，判断点击元素

发表于 更新于

开发过程中遇到一个需求，一个第三方的富文本编辑器，需要用户点击输入框以外的地方自动提交数据。通常的输入框给个失焦事件就ok了，但需求要切换窗口啥的回来还在编辑框里。这就坑爹了，只能自己重写事件了。请教前端大佬，推荐我用compareDocumentPosition去做。记录下过程。

这里用到了两个高阶知识点：

  1. 事件监听：addEventListener、removeEventListener
  2. 判断父子关系：compareDocumentPosition

我的富文本输入框是作为组件抽出来的，在渲染该组件时添加事件监听：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

export default class EditableRichCell extends React.Component {
componentDidMount() {
    document.addEventListener('click', this.onDocumentClick, false);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onDocumentClick, false);
  }

  onDocumentClick = e => {
    try {
      if (e.target.compareDocumentPosition(document.getElementById('rich-cell-custom')) === 10) {
        console.log('erzi');
      } else if (this.state.editable) {
        this.check();
      }
    } catch (error) {
      console.log(error);
    }
  };
render(){
return(
		<div 
            id="rich-cell-custom"
          >
            <Editor
              editorState={editorState}
              localization={{ locale: 'zh' }}
            />
          </div>
)
}
  }

基本流程如下：
1.组件渲染时监听事件
2.判断点击元素是否是我设定id为‘rich-cell-custom’的子组件
3.不是的话按需求来判断是符合提交条件
4.组件关闭时去掉监听

关于compareDocumentPosition还有个contains与之类似。
NodeA.compareDocumentPosition(NodeB) 返回的结果

1
2
3
4
5
6
7
8
  Bits          Number        Meaning 
000000         0              元素一致 
000001         1              节点在不同的文档（或者一个在文档之外） 
000010         2              节点 B 在节点 A 之前 
000100         4              节点 A 在节点 B 之前 
001000         8              节点 B 包含节点 A 
010000         16             节点 A 包含节点 B 
100000         32             浏览器的私有使用

contains返回的是布尔类型true 和false，包含的话就返回true，不包含的话就返回false