开发WordPress图片映射插件遇问题：点击area先弹提示再显模态框

你的问题核心是未正确阻止area标签的默认行为，导致触发了浏览器或环境自带的提示，之后才执行模态框逻辑。试试下面的两种解决方法：

方案1：完善事件处理逻辑 #

修改JS代码，传入事件对象并同时阻止默认行为与事件冒泡：

jQuery(document).ready(function($) {
    $('.imgclick').click(function(e) {
        // 阻止area默认跳转行为和事件冒泡
        e.preventDefault();
        e.stopPropagation();
        // 打开模态窗口
        $('#modal-mapeo').modal('show');
    });
});

方案2：替换href属性值 #

把area标签的href='#'改成href='javascript:void(0)'，从根源避免锚点跳转的默认行为，再配合方案1的JS逻辑双重保险：

<img src='image.jpg' usemap='#image_map'>
<map name='image_map'>
    <area alt='img' title='img' href='javascript:void(0)' coords='561,1121,693,1162' shape='rect' class='imgclick'/></map>

额外排查点 #

如果问题仍存在，检查WordPress后台是否启用了其他可能拦截点击事件的插件（如弹窗类、安全类插件），或者当前主题的JS代码是否与你的逻辑冲突。

内容的提问来源于stack exchange，提问作者Jesus Manuel Cortes Guzman