Django项目中下拉菜单mousedown事件跨浏览器表现不一致的解决方法

这个问题我之前也碰到过，Firefox在下拉菜单的事件处理逻辑上和Chrome确实有差异——当你点击下拉选项时，mousedown事件会向上冒泡到父容器#div_id_res_person_1，从而触发了第二次AJAX请求。下面给你几个简单可行的解决方案：

方案一：阻止下拉选项的事件冒泡 #

通过事件委托给动态加载的<option>元素绑定mousedown事件，并阻止它向上冒泡，这样父容器的mousedown就不会被触发了。在你的现有代码后面添加这段代码即可：

// 阻止option的mousedown事件冒泡到父容器
$("#div_id_res_person_1").on("mousedown", "option", function(e) {
    e.stopPropagation();
});

原理：当用户点击下拉选项时，这个事件会先被option的处理函数捕获，然后调用stopPropagation()阻止它继续向上传递到父div，从而避免触发你的AJAX逻辑。

方案二：在父容器的事件中过滤点击目标 #

修改你原来的mousedown处理函数，判断当前点击的目标是不是<option>元素，如果是就直接返回，不执行AJAX请求：

$("#div_id_res_person_1").mousedown(function (e) {
    // 如果点击的是下拉选项，直接终止执行
    if ($(e.target).is("option")) {
        return;
    }

    $("#id_res_person_1").empty();
    $("#id_res_person_1").append("<option>" + '---------' + "</option>")
    var value_1 = $("#id_report_division").val();
    var value_2 = $("#id_report_sector").val();
    var value_3 = $("#id_report_department").val();
    var url = $("#PostForm").attr("data-person-url");
    console.log("a")
    $.ajax({
        url: url,
        data: {
            'divizija': value_1,
            'sektor': value_2,
            'odjel': value_3
        },
        success: function (data) {
            $("#id_res_person_1").html(data);
        }
    });
});

原理：通过e.target获取当前点击的DOM元素，判断它是不是<option>，如果是就跳过后续的AJAX逻辑，只在用户点击下拉框本身（展开菜单时）才执行数据加载。

方案三：改用click事件绑定到下拉框本身 #

考虑把事件绑定从父div转移到下拉框#id_res_person_1上，并且改用click事件（click事件在Firefox中不会在选择选项时重复触发）：

$("#id_res_person_1").click(function () {
    $("#id_res_person_1").empty();
    $("#id_res_person_1").append("<option>" + '---------' + "</option>")
    var value_1 = $("#id_report_division").val();
    var value_2 = $("#id_report_sector").val();
    var value_3 = $("#id_report_department").val();
    var url = $("#PostForm").attr("data-person-url");
    console.log("a")
    $.ajax({
        url: url,
        data: {
            'divizija': value_1,
            'sektor': value_2,
            'odjel': value_3
        },
        success: function (data) {
            $("#id_res_person_1").html(data);
        }
    });
});

注意：如果担心重复触发，可以加一个判断，比如只有当下拉框的选项为空（或者只有默认的分隔符选项）时才执行AJAX，避免重复请求。

我个人推荐方案一，它改动最小，而且逻辑清晰，不会影响你原来的代码结构。

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