Question

我有一个连接到锚元素的按钮。当我点击锚点内的跨度时，事件将按预期被触发。我遇到的问题是该函数使用span作为触发事件的元素。这是我的UI代码：

<a href="" class="col-xs-4 text-center facebook-share" style="background-color:yellow" data-share="facebook" data-title="Check this out, yo" data-image="my-image" data-link="my-url" data-description="Nice, very nice" href="#">
    <span class="like">LIKE</span>
    <span class="sep">/</span>
    <span class="like-count count">0</span>
</a>

这是我正在使用的库中的事件处理程序：

events: function() {

            var self = this;

            this.element.on('click', 'a[data-share]', function( e ) {

                e.preventDefault();

                var $el = $(e.target);

                switch ( $el.data('share') ) {
                    case 'facebook': self.facebook( $el ); break;
                    case 'twitter': self.twitter( $el ); break;
                    case 'googleplus': self.googleplus( $el ); break;
                }

                $el.blur();

            });

            if ( this.options.facebook.appID ) {

                window.fbAsyncInit = function() {
                    FB.init({appId: self.options.facebook.appID, status: false});
                };

            }

        }

在这个$ el中，跨度意味着没有数据。事件应该传播到锚点吗？我该怎么做才能确保这种情况发生？

Answer 1

您必须在this上使用e.target，因为目标可以是注册事件的元素的后代（此处为a[data-share]）

另见JQuery Event.target

jquery onclick子元素

1 个答案: