如何阻止chessboard.js棋盘在移动端触发上下文菜单？

使用chessboardjs的棋盘组件时，点击棋子会触发浏览器默认上下文菜单（截图：），尝试以下代码后无效：

$('.square-55d63').contextmenu(function(e){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});

可行解决方案： #

• 绑定到棋盘容器：直接给整个棋盘的父容器绑定阻止事件，覆盖所有子元素的右键行为：

$('#your-chessboard-container').contextmenu(function(e) {
    e.preventDefault();
    return false;
});

替换#your-chessboard-container为你初始化棋盘时使用的容器ID。

• 覆盖棋子元素：Chessboard.js的棋子有独立类名.piece-417db，之前只绑定了方块类.square-55d63，右键点击棋子本身时事件可能没被捕获，需同时绑定两类元素：

$(document).on('contextmenu', '.square-55d63, .piece-417db', function(e) {
    e.preventDefault();
    return false;
});

用事件委托$(document).on可确保动态生成的棋子元素也能被监听。

• 确保在棋盘初始化后执行：若代码执行时机早于棋盘生成，绑定会失效，建议放在棋盘的onLoad回调中：

var board = Chessboard('your-chessboard-container', {
    // 你的棋盘配置项
    onLoad: function() {
        $('.square-55d63, .piece-417db').contextmenu(function(e) {
            e.preventDefault();
            return false;
        });
    }
});

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