Предотвращение действий JavaScript на компонентах Ember.js

Question

Я хочу предотвратить действия JavaScript на моем компоненте ember, например hover, click, double click, focus, etc..

Простой способ определить эти действия для компонента и выполнить event.preventDefault() и return false;

Есть ли другой способ, которым я могу достичь того же? Я пробовал использовать CSS для этого pointer-events : none, который отлично подходит для интерфейса пользователя. Но когда я иду на консоль, я вижу, что я все еще могу вызвать действия click на моем компоненте div. Итак, есть ли способ, с помощью которого я могу предотвратить эти действия сразу, возможно, в течение init компонента?

Answer 1

Итак, я закончил эту реализацию. Не идеально, но работает!

//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; 
    } 

Answer 2

Итак, я по случаю сделал вещи в Эмбере только для чтения с помощью компонента с помощью Jquery blockUI плагина

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

Это создает наложение и предотвращает любое взаимодействие с пользователем. В вашем случае селектором будет идентификатор компонентов, который вы можете получить через this.elementId со своего компонента. Для меня этот подход работает намного лучше, чем пытаться перезагрузить весь мой пользовательский интерфейс в режиме только для чтения.