Question

我试图使用事件定义来确定将在我的指令中使用哪个模板。问题是我无法弄清楚如何获取click事件绑定的按钮元素。事件目标可以根据用户单击时鼠标的位置而变化。它可以是span或button标签。获取按钮元素的最佳方法是，目标是没有各种疯狂条件代码的跨度还是按钮？

此外我无法自定义指令，因为我使用的是Angular Material而且我无法使用jQuery。

HTML：

import React from 'react';
import MenuItem from './MenuItem';

export default class Menu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isMaximized: true,
            selectedMenuItem: this.props.modules[0].screens[0].id
        };

        this.handleMenuToggle = this.handleMenuToggle.bind(this);
        this.onMenuItemClick = this.onMenuItemClick.bind(this);
    }

    handleMenuToggle() {
        this.setState({ isMaximized: !this.state.isMaximized });
    }

    onMenuItemClick(screenId) {
        this.setState({ selectedMenuItem: screenId });
    }

    render () {
        let drawerClassNames = this.state.isMaximized ? 'drawerMaximized' : 'drawerMinimized';
        return (
            <div className='mdl-js-layout mdl-layout--fixed-drawer'>
                <div className={'mdl-layout__drawer drawer scrollbar ' + drawerClassNames }>
                    <ul className='demo-list-item mdl-list content'>
                    {this.props.modules.map((module, index) =>
                        <li key={index}>
                            <span className="mdl-layout-title menuHeader">{module.moduleName}</span>
                                {module.screens.map((screen) =>
                                    <MenuItem key={screen.id}
                                              id={screen.id}
                                              screenName={screen.screenName}
                                              icon={screen.icon}
                                              isSelected={ screen.id === this.state.selectedMenuItem ? true : false }
                                              onClick={this.onMenuItemClick}/>
                                )}
                        </li>)}
                    </ul>
                </div>
            </div>
        );
    }
}

Menu.propTypes = {
    modules: React.PropTypes.arrayOf(
        React.PropTypes.shape({
                moduleName: React.PropTypes.string.isRequired,
                id: React.PropTypes.number.isRequired,
                screens: React.PropTypes.arrayOf(
                    React.PropTypes.shape({
                        id: React.PropTypes.number.isRequired,
                        screenName: React.PropTypes.string.isRequired,
                        icon: React.PropTypes.string.isRequired
                    })
                ).isRequired
            }
        )
    ).isRequired
}

Answer 1

event.currentTarget告诉您挂钩事件的元素，而不是触发事件的元素（event.target）。

示例：

＆＃13;

var myApp = angular.module('exModule', []);
myApp.controller('exController', function($scope) {
  $scope.main = {
    authDialog(e) {
      console.log("target", e.target);
      console.log("currentTarget", e.currentTarget);
    }
  };
});

＆＃13;

<div ng-app="exModule" ng-controller="exController">
  <button ng-click="main.authDialog($event)">
    <span class="ng-scope">Sign Up</span>
    <div class="md-ripple-container"></div>
  </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

＆＃13;

附注：该HTML无效，button elements不能包含div elements。

获取包含Click事件的元素

1 个答案: