在textarea元素Angularjs中触发oncontextmenu事件

Posted 2023-05-07

【中文标题】在textarea元素Angularjs中触发oncontextmenu事件

【英文标题】：Trigger oncontextmenu event in textarea element Angularjs

【发布时间】：2017-06-14 09:24:24

【问题描述】：

我正在使用来自 here 的 Angularjs 打包库。它工作正常，但我发现当我点击它时我无法编辑 textarea 内容。在花了一些时间之后，当我右键单击 textarea 元素时，我能够使其可编辑，但如果我单击它仍然无法工作。因此，现在我尝试在单击 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（右键单击）事件的 click() 函数：

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

        ;

但这个解决方案似乎不起作用。我究竟做错了什么？

【问题讨论】：

我认为 fiddle 对那些非常熟悉 Angular 但对 packery 不太熟悉的人来说真的很有帮助。

【参考方案1】：

我肯定会建议找出阻止您专注于 textarea 的原因，因为单击它并聚焦是默认行为，但是，您可以尝试使用 'for ' 属性是 textarea 的 id 例如：

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

我通常不会接受这一点，因为 label 是一个内联元素，而 textarea 是一个块元素，但在你的情况下它可能会对你有所帮助。

为了跟踪阻止您集中注意力的原因，我建议右键单击 textarea > 检查元素，然后在 Chrome 开发工具的元素选项卡上查找“事件侦听器”选项卡（应该在窗口）应该能够看到已绑定到该元素的所有侦听器，并可能帮助您跟踪问题的根源。