javascript - Internet Explorer 和 Chrome 中事件更改的差异

Question

我有一个网站，它使用输入type=file来上传一些文件。

上传后我不想显示文件选择，因此我将通过调用 event.target.value = null 将其删除。

function viewModel() {
  var self = this;
  self.addAudioFile = function(data, event) {
    event.preventDefault();

    var context = ko.contextFor(event.target);
    var selectedFile = event.target.files[0];
    var targetPrompt = data.prompt;
    console.log("aa");
    event.target.value = null;

  }
}

$(document).ready(function() {
  var newModel = new viewModel();
  ko.applyBindings(newModel);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="btn-link prompt-audio-control">
  <div class="btn-file">
    <input type="file" data-bind="event: {change: $root.addAudioFile}" accept="audio/wav|audio/pcm|audio|vox">
    <span> Upload </span>
  </div>
</div>

这里让我困惑的是，当我使用 Chrome 测试时，函数 addAudioFile 只执行了一次，但当我使用 IE 时，它执行了该函数 2 次。

我使用了 console.log("aa") 来测试它。谁能解释一下为什么会发生这种情况？

Answer 1

由于这次调用，它被触发了两次。

event.target.value = null;

该行之后，将再次触发更改事件。尝试在该行之后放置另一个 console.log，以便您可以看到效果。

类似于:

event.target.value = null;
console.log("bb");

因此，为了阻止函数继续第二次调用，您可以捕获 event.target.value 的值。

self.addAudioFile = function(data, event) {
    if(event.target.value === ""){
        return;
    } 
    ... rest of code here ...
}

为什么它被检查为字符串而不是空值？这部分我不确定，但浏览器引擎将其转换为空白字符串，因此出现了这种情况。

对于 chrome 不会触发两次的部分，我将其留给浏览器专家，但我的猜测是 chrome 引擎设置为如果给出空值则不会更改文件(尽管这只是我的疯狂猜测) )。

==================

最后，您可以通过这种方式使用 knockout ，但您“不应该”这样做:D请参阅 Tomalak 的答案，了解如何使用自定义绑定(bind)分离 knockout 的 DOM 问题。