Question

我知道您可以将bubbles=false添加到停止传播到父元素的操作中，但是如何阻止某个操作被调用它的子元素？

我正在尝试为我的网站创建一个叠加层，该叠加层具有透明背景overlay-bg，close按钮和一些overlay-content。这些元素中的每一个都应该可以点击hide叠加层。但每当我点击popup（限制在overlay-content内的宽度为400px）或弹出窗口内的表单元素等时...... hide方法仍然被调用。我的表格上的其他动作也同时被调用。

我最初的想法，我用jQuery完成此操作的方法是使用event来确定被点击的元素是否在其上有类canClose，如果是单击子元素，函数将在完成之前返回...但我似乎可以弄清楚如何从操作中访问event对象。我尝试将this作为操作的参数返回，但这只返回了ember组件本身，而不是返回被点击的元素。

组件：

App.OverlayComponent = Ember.Component.extend({

    elementId: 'login-overlay',

    // ...

    actions: {

        // ...

        hide: function () {
            var view = this;
            view.set('showing', false);
            view.$().one(Ember.$.support.transition.end, function () {
                view.destroy();
            });
        }
    },

});

模板：

<div class="overlay-bg" {{action 'hide'}}></div>

<a href="#" class="close" {{action 'hide'}}>&times;</a>

<div class="overlay-content" {{action 'hide' this}}>
    <div class="popup">
        <h1>Login</h1>

        <form {{action 'login' on='submit'}}>
            <label for="username">Username</label>
            {{input value=username id="username" placeholder="Your email address" classNameBindings='usernameError:error'}}

            <label for="password">Password</label>
            {{input type="password" value=password id="password" placeholder="Password" classNameBindings='passwordError:error'}}

            <button class="btn btn-primary" {{action 'login'}}>Login</button>
            <p class="text-center forgot"><a href="#" {{action 'forgot'}}>Forgot Password?</a></p>
        </form>

        <hr>

        <p class="mb0 text-center"><a href="#" title="Login with Facebook" class="btn btn-primary facebook" {{action 'facebook'}}><i class="fa fa-facebook"></i> Login with Facebook</a></p>
    </div>
    <p class="text-center signup">Don't have an account? <a href="#" {{action 'signup'}}>Signup</a></p>
</div>

更新

忘记提及，我也尝试将e添加到我的隐藏功能和模板中的把手助手（hide: function (e) {}和{{action 'hide' event}}）内，但是当我记录e时它undefined。

另外，我使用的是Ember 1.0.0 ...我是否需要更新到更新的版本才能访问我的操作中的事件？

Answer 1

我遇到了这个问题。我将动作保留在bg图层上并将其从父元素中删除，即

<div class="overlay-bg" {{ action 'hide' }}></div>
<div class="overlay-content">...</div>

如果您对.overlay-content采取了操作，因为它涵盖.overlay-bg，您可能需要

.overlay-content {
  pointer-events: none;
}

.overlay-content > * {
  pointer-events: all;
}

如何阻止余烬动作触发其子元素/如何访问动作中的事件

1 个答案: