文字領域のoncontextmenuイベントをトリガするAngularjs

Question

私はAngularjsのpackeryライブラリをhereから使用しています。それはうまく動作しますが、私はそれをクリックするとテキストエリアのコンテンツを編集できないことが分かりました。私はtextarea要素を右クリックすると編集可能になりましたが、クリックするとまだ動作しません。それで、テキストエリアをクリックすると、右クリックイベントを手動でトリガして、要素を編集可能にしています。

は、ここでは、コード

<packery ng-model="files" gutter="12" style="border:0px solid black;width:710px;" > 

     <packery-object ng-init="user_text='Write something ...';" class="large text sans-font medium-font box-border-raduis"> 
      <div class="hidden-overflow sans-font medium-font" style="clear: both; border: 0px solid purple; 
         background: white; border-top: 6px solid #00a2d3; padding: 10px; "> 
        <textarea id="Mytextarea" contenteditable="true" style="margin: 0px;" 

          ng-click="click();" 
          >{{user_text}} 
        </textarea> 
      </div> 
     </packery-object> 
</packery> 

だとここにも、oncontextmenuをトリガーしようとクリック（）関数は、（右クリック）イベントです：

$scope.click = function(){ 
      console.log('clicked!'); 
      var e = angular.element(document.querySelector('#Mytextarea')); 
      console.log(e); 
      angular.element(e).triggerHandler("oncontextmenu"); 

     }; 

しかし、このソリューションは、動作していないようです。私は間違って何をしていますか？

Answer 1

私は間違いなくあなたがそれをクリックして焦点を当てているので、テキストエリアに焦点を当てることを防ぐことをお勧めしますが、デフォルトの動作ですが、代わりにテキストエリアをラップするdivを持つことを試みることができますラベル ' 」属性は、テキストエリアのIDなどであるために：

<label for="Mytextarea" class="hidden-overflow sans-font medium-font" ...> 
     Textarea here 
</label> 

ラベルはインライン要素であり、テキストエリアがブロック要素であるので、私は通常これを受け入れないと思いますが、あなたの場合には、それはあなたを助けるかもしれません。

フォーカスを妨げているものを追跡するには、textarea> inspect要素を右クリックし、Chrome開発ツールの要素タブで[イベントリスナー]タブを探してください（右隅にあるはずです）その要素にバインドされているすべてのリスナーが表示され、問題の原因を追跡するのに役立つはずです。