同一事件和节点上的事件处理程序以相反的顺序运行

Event handers on same event and node run in inverse order

本文关键字：顺序 运行 程序 事件处理 事件 节点      更新时间：2023-09-26

我正在调整一些旧代码(因此风格不一致)，组织如下:

<script type="text/javascript" src="/js/general.js"></script>
<script type="text/javascript" src="/js/page.js"></script>

general.js 

jQuery(function($){
    if( typeof FileReader !== "undefined" ){
        $('form[enctype="multipart/form-data"]').each(function(){
            $(this).on("change", "input:file", function(event){
                // Code to abort upload if file is too lage
                alert("Sorry, file is too large");
                $(this).val("");
                event.stopImmediatePropagation();
            });
        });
    }
});
var addAdditionalField = function(event){
    // Code to add an additional field if needed
}
<标题> page.js h1> 需要事件处理程序按照我定义的顺序运行:
  1. 大小检查
  2. 添加字段

…所以我可以从第一个发射中止第二个发射。但是正如小提琴显示的那样，我得到了相反的顺序(您需要选择一个文件，不需要实际上传它)。

你能发现问题吗?

第一个处理程序绑定到表单上，而第二个处理程序绑定到输入元素上。

由于jQuery使用事件冒泡，事件首先触发你的输入元素(触发第二个处理程序)，然后在你的表单(它只过滤输入元素，然后触发第一个处理程序)

将第二个绑定更改为

$('form[enctype="multipart/form-data"]').on("change", "input:file", function(event){
    ...

是解决你的问题的一种方法(你可以让第一个选择器更具体，如果你只想为页面上的特定表单做这个)。

相关文章：