Material-UI React.js，有没有办法让 ListItem 和 ListItem 的 Avatar 都有一个 onClick 事件？

Question

我正在使用 Material UI 库，无法弄清楚是否有办法让列表项上发生 2 个不同的点击事件。

这基本上就是我所拥有的：

    <ListItem
      leftAvatar={
        <div onClick={() =>
          insideAvatarFunction()}
        >
          {<Avatar />}
        </div>
      }
      primaryText={primaryText}
      onTouchTap={() => everywhereClickFunction}
    />);

onTouchTap触发，忽略leftAvatar里面的onClick。如果外部 onTouchTap 不存在，则 onClick 触发正常。

有没有办法让 onTouchTap 在点击头像以外的任何地方时触发？

谢谢！

Answer 1

万一其他人遇到这个问题，@zv.diego 的评论解决了这个问题。

我将 stopPropagation() 放入 div 的 onClick 函数中，并将父级切换为 onClick 而不是 onTouchTap 并且它有效!

Answer 2

Event.stopPropagation()

Prevents further propagation of the current event in the capturing and bubbling phases.

import React from 'react';
import {List, ListItem} from 'material-ui/List';
import Avatar from 'material-ui/Avatar';

export default class App extends React.Component {

  insideAvatarFunction(e) {
    e.stopPropagation();
    console.log('Fired insideAvatarFunction()!');
  }

  everywhereClickFunction(e) {
    console.log('Fired everywhereClickFunction()!');
  }

  render () {
    return (
      <List>
        <ListItem primaryText="Inbox"
          leftAvatar={
            <div onClick={this.insideAvatarFunction}>
              <Avatar />
            </div>
          }
          onTouchTap={this.everywhereClickFunction}
          onClick={this.everywhereClickFunction}
        />
      </List>
    );
  }
}

因此，当单击 Avatar 的节点时，insideAvatarFunction 中的 e.stopPropagation() 行应防止 onClick/onTouchTap 进一步传播到父节点，即 ListItem组件。

这是一篇关于 Javascript Events Order 和事件冒泡的有趣读物。

Material-UI React.js，有没有办法让 ListItem 和 ListItem 的 Avatar 都有一个 onClick 事件？

Material-UI React.js, Is there a way to have an onClick event for both a ListItem, and the ListItem's Avatar?

reactjs

material-ui