EF6 MVC3站点拖拽链接被误判为点击，绕过确认对话框求助

核心问题分析 #

生产环境中链接拖拽后触发跳转，本质是onclick事件在拖拽场景下的触发逻辑与开发环境存在差异（可能是生产环境的浏览器缓存、JS压缩后的行为变化，或是特定浏览器版本的默认事件优先级问题），导致confirm校验被绕过。

具体解决方案 #

方案1：阻止链接默认拖拽行为

浏览器默认允许拖拽链接，拖拽后松开可能直接触发跳转。通过ondragstart事件阻止默认拖拽行为，从根源避免该场景：

<!-- 原生a标签示例 -->
<a href="@Url.Action("something","somecontroller")?listId=@Model.ListOfCLists[i].CListId" 
   onclick="return confirm('Do you really want this?');"
   class="btn btn-xs menulink" download
   ondragstart="return false;">
    <span class="glyphicon glyphicon-cloud-download"></span> Download
</a>

<!-- ActionLink示例 -->
@Html.ActionLink("Välj", "BuyTicket", new { ticketTypeID = 11 }, new { 
    @onclick = "return confirm('Vill du använda 124 poäng?')", 
    @class = "btn btn-primary btn-xs orange pull-right",
    ondragstart = "return false;"
})

方案2：结合鼠标事件状态判断有效点击

通过监听mousedown和mouseleave记录点击状态，在click事件中校验是否为有效点击（未发生拖拽离开）：

<!-- 原生a标签示例 -->
<a href="@Url.Action("something","somecontroller")?listId=@Model.ListOfCLists[i].CListId" 
   class="btn btn-xs menulink" download
   onmousedown="this.dataset.clickStarted = true"
   onmouseleave="this.dataset.clickStarted = false"
   onclick="if (!this.dataset.clickStarted) return false; return confirm('Do you really want this?');">
    <span class="glyphicon glyphicon-cloud-download"></span> Download
</a>

<!-- ActionLink示例 -->
@Html.ActionLink("Välj", "BuyTicket", new { ticketTypeID = 11 }, new { 
    @class = "btn btn-primary btn-xs orange pull-right",
    onmousedown = "this.dataset.clickStarted = true",
    onmouseleave = "this.dataset.clickStarted = false",
    onclick = "if (!this.dataset.clickStarted) return false; return confirm('Vill du använda 124 poäng?');"
})

方案3：用事件委托统一处理（适合多链接场景）

如果站点内这类确认链接较多，用MVC3默认自带的jQuery统一绑定事件，避免重复代码：

$(function() {
    $('a[data-confirm]').on({
        mousedown: function() {
            $(this).data('isClicking', true);
        },
        mouseleave: function() {
            $(this).data('isClicking', false);
        },
        click: function(e) {
            if (!$(this).data('isClicking')) {
                e.preventDefault();
                return false;
            }
            if (!confirm($(this).data('confirm'))) {
                e.preventDefault();
                return false;
            }
            $(this).data('isClicking', false);
        }
    });
});

使用此方法时，需修改链接的属性定义，将onclick替换为data-confirm：

<!-- 原生a标签示例 -->
<a href="@Url.Action("something","somecontroller")?listId=@Model.ListOfCLists[i].CListId" 
   data-confirm="Do you really want this?"
   class="btn btn-xs menulink" download>
    <span class="glyphicon glyphicon-cloud-download"></span> Download
</a>

<!-- ActionLink示例 -->
@Html.ActionLink("Välj", "BuyTicket", new { ticketTypeID = 11 }, new { 
    @data_confirm = "Vill du använda 124 poäng?", 
    @class = "btn btn-primary btn-xs orange pull-right"
})

额外排查点 #

• 检查生产环境的JS压缩/混淆配置，确认未破坏事件逻辑；
• 对比开发与生产环境的浏览器版本，测试是否为特定版本的行为差异。

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