Question

我想阻止我的ember组件上的JavaScript操作，例如hover, click, double click, focus, etc.。

简单的方法是为组件定义此操作并执行event.preventDefault()和return false;

还有其他方法可以实现同样的目标吗？我尝试使用CSS pointer-events : none，这对于UI体验很好。但是当我进入控制台时，我发现我仍然可以在我的组件div上调用点击操作。那么，有没有什么方法可以在组件的init期间一次性阻止这些操作？

Answer 1

所以，我偶尔通过使用jquery blockUI插件在Ember中只读取一个组件

export function blockElement(selector, shouldBlock){
    $(selector).unblock();
    if(shouldBlock){
        $(selector).block({message: null, overlayCSS:  {
            backgroundColor: '#000',
            opacity:         0.01,
            cursor:          'not-allowed'
        }});
    }
}

这会创建叠加并阻止任何用户互动。在您的情况下，选择器将是组件ID，您可以通过组件中的this.elementId获取组件ID。对我来说，这种方法比尝试将我的所有UI重新调整为只读模式

更好

Answer 2

所以我最终得到了这个实现。不理想，但有效！

    //component.js

    isDisabled : false // flag to decide disabling
    listOfSupportedBrowserEvents : ['click', 'focusOut', 'mouseEnter', 'mouseLeave'],

    // mixin.js

    updateEventHandlersOnDidInsertElement: function(){
        if(this.get('isDisabled')) {
                    this.get('listOfSupportedBrowserEvents').forEach(function(eventName) {
                        this.$().on(eventName, Ember.run.bind(this, this._disableBrowserEvents));
                    }.bind(this));
                }
            }.on('didInsertElement'),

    updateEventHandlersOnWillDestroyElement: function(){
         if(this.get('isDisabled')) {
                    this.get('listOfSupportedBrowserEvents').forEach(function(eventName) {
                        this.$().off(eventName, Ember.run.bind(this, this._disableBrowserEvents));
                    }.bind(this));
                }
            }.on('willDestroyElement'),

    _disableBrowserEvents : function() {
       return false;
    }

防止Ember.js组件上的JavaScript操作

2 个答案: