我创建了一个移动下拉菜单，可根据状态切换打开和关闭。打开后，我希望用户能够通过单击 ul 之外的任意位置来关闭下拉菜单。

我将 ul 上的 tabIndex 属性设置为 0，这为 ul 提供了“焦点”。我还向 ul 添加了一个 onBlur 事件，该事件触发隐藏 ul 的状态更改 (dropdownExpanded = false)。

<ul tabIndex="0" onBlur={this.hideDropdownMenu}>
  <li onClick={this.handlePageNavigation}>Page 1</li>
  <li onClick={this.handlePageNavigation}>Page 2</li>
  <li onClick={this.handlePageNavigation}>Page 3</li>
</ul>

但是，当我实现此修复时，每个 li 元素上的 onClick 事件都无法触发。

我知道事件冒泡时发生了一些事情，但我不知道如何解决它。谁能帮忙？

注意:

我知道您可以在 ul 下方创建一个跨越整个视口(viewport)的透明 div，然后甚至向那个将改变状态的 div 添加一个 onClick，但我读到了这个 tabIndex/focus 解决方案 on Stack Overflow我真的很想让它工作。

这是一个更完整的代码 View (下拉菜单供用户选择他们的祖国，这会更新用户界面):

const mapStateToProps = (state) => {
    return {
        lang: state.lang
    }
}

const mapDispatchToProps = (dispatch) => {
    return { actions: bindActionCreators({ changeLang }, dispatch) };
}

class Header extends Component {
    constructor() {
        super();

        this.state = {
          langListExpanded: false
        }

        this.handleLangChange = this.handleLangChange.bind(this);
        this.toggleLangMenu = this.toggleLangMenu.bind(this);
        this.hideLangMenu = this.hideLangMenu.bind(this);

    }

    toggleLangMenu (){
      this.setState({
        langListExpanded: !this.state.langListExpanded
      });
    }

    hideLangMenu (){
      this.setState({
        langListExpanded: false
      });
    }


    handleLangChange(e) {
        let newLang = e.target.attributes['0'].value;
        let urlSegment = window.location.pathname.substr(7);

        // blast it to shared state
        this.props.actions.changeLang( newLang );
        // update browser route to change locale, but stay where they are at
        browserHistory.push(`/${ newLang }/${ urlSegment }`);
        //close dropdown menu
        this.hideLangMenu();
    }

    compileAvailableLocales() {
        let locales = availableLangs;
        let selectedLang = this.props.lang;

        let markup = _.map(locales, (loc) => {
            let readableName = language[ selectedLang ].navigation.locales[ loc ];

            return (
                <li
                  key={ loc }
                  value={ loc }
                  onMouseDown={ this.handleLangChange }>
                    { readableName }
                </li>
            );
        });

        return markup;
    }


    render() {
        let localeMarkup = this.compileAvailableLocales();
        return (
            <section className="header row expanded">
              < Navigation />
            <section className="locale_selection">
                  <button
                    className="btn-locale"
                    onClick={this.toggleLangMenu}>
                    {this.props.lang}
                  </button>
                  <ul
                      className={this.state.langListExpanded ? "mobile_open" : " "}
                      value={ this.props.lang }
                      tabIndex="0"
                      onBlur={this.hideLangMenu}>
                  >
                      { localeMarkup }
                  </ul>

                </section>
            </section>
        )
    }
}

最佳答案

尝试使用 onMouseDown 而不是 onClick。

关于javascript - React - ul with onBlur 事件阻止 onClick 在 li 上触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44142273/