Polymer中<iron-image>的on-contextmenu事件失效，如何禁用右键？

嘿，我之前在Polymer的<iron-image>上遇到过完全一样的问题——原生事件绑定在自定义元素上并不总是像预期那样生效。给你几个靠谱的解决方法：

问题根源 #

<iron-image>是Polymer自定义元素，它内部实际渲染的是原生<img>标签，但直接在<iron-image>上绑定on-contextmenu有两个问题：一是Polymer的事件绑定需要遵循它的语法规则，二是右键事件其实是从内部的<img>元素冒泡上来的，直接绑定在自定义元素上可能没正确捕获到。

方案1：用Polymer标准事件绑定语法 #

修改你的HTML代码，使用Polymer的事件绑定方式指定处理函数，然后在元素的脚本中实现这个函数：

修改后的HTML代码 #

<div class='dashboard-prod-right' id='sellerProduct' style='width:100%;' on-click="setSelProduct" >
  <div>
    <iron-image 
      id="prodImage"
      class="defaultImageURL sized" 
      src="[[product.sellerProductSetDto.0.setImageURLList.0.imageURL]]" 
      on-contextmenu="_handleRightClick"
      style="width:calc(100% - 10px);height:170px!important;cursor:pointer;background-color: white;"
      sizing="contain" 
      placeholder="/img/placeholder.jpg" 
      preload fade >
    </iron-image>
  </div>
</div>

对应的Polymer脚本 #

class YourElement extends Polymer.Element {
  static get is() { return 'your-element-name'; } // 替换成你的元素名

  _handleRightClick(event) {
    alert("Sorry, right click is not allowed !!");
    // 阻止右键菜单的默认行为
    event.preventDefault();
    // 停止事件冒泡，避免触发父元素的右键事件
    event.stopPropagation();
    return false;
  }
}
customElements.define(YourElement.is, YourElement);

方案2：给父元素绑定右键事件（更简单） #

如果不想单独处理<iron-image>，可以直接在它的父级<div>上绑定右键事件——因为右键事件会向上冒泡，点击图片时也会触发父元素的处理函数：

修改后的HTML代码 #

<div class='dashboard-prod-right' id='sellerProduct' style='width:100%;' on-click="setSelProduct" on-contextmenu="_handleRightClick" >
  <div>
    <iron-image 
      class="defaultImageURL sized" 
      src="[[product.sellerProductSetDto.0.setImageURLList.0.imageURL]]" 
      style="width:calc(100% - 10px);height:170px!important;cursor:pointer;background-color: white;"
      sizing="contain" 
      placeholder="/img/placeholder.jpg" 
      preload fade >
    </iron-image>
  </div>
</div>

同样使用上面的_handleRightClick处理函数即可。

重要提醒 #

前端层面的右键禁用只是基础限制，用户仍然可以通过浏览器开发者工具查看图片URL、禁用JavaScript等方式获取图片，这个方法只能阻止普通用户的常规右键操作哦。

内容的提问来源于stack exchange，提问作者Kapil Soni