为啥 preventDefault 不起作用？

Posted 2023-05-08

【中文标题】为啥 preventDefault 不起作用？

【英文标题】：Why preventDefault does not work?为什么 preventDefault 不起作用？

【发布时间】：2013-01-18 10:06:28

【问题描述】：

这是我的代码的一部分。 如果我尝试将图像放在块上 preventDefault 不起作用。

        jQuery(document).ready(function($) 
            $.event.props.push('dataTransfer');
            $('#imgDropzone').on(
                dragenter: function(e) 
                    $(this).css('background-color', '#ffd1ff');
                ,
                dragleave: function(e) 
                    $(this).css('background-color', '');
                ,
                drop: function(e) 
                    e.stopPropagation();
                    e.preventDefault();

                    var file = e.dataTransfer.files[0];
                    var fileReader = new FileReader();
                    var el = $(this);
                    fileReader.onload = (function(file) 
                        return function(event) 
                            alert(event.target.result);
                        ;
                    )(file);
                    fileReader.readAsDataURL(file);
                
            );
        );

http://jsfiddle.net/LrmDw/

【问题讨论】：

我希望 SO 有一个内置过滤器来检测声称“不起作用”的问题，然后 无法准确描述出了什么问题。

【参考方案1】：

您还需要^* 来防止所有其他拖动事件的默认设置：

见http://jsfiddle.net/LrmDw/2/

$('#imgDropzone').on("dragenter dragstart dragend dragleave dragover drag drop", function (e) 
    e.preventDefault();
);

解释原始 jsfiddle 中的哪些问题：

当您将文件拖放到放置区域（或页面中的任何位置）时，浏览器的默认行为是离开并尝试解释文件。如果你放下一个正常的 例如 txt 文件，浏览器将离开 jsfiddle 并显示 txt 文件的内容。这是在 Chrome 中。

---

顺便说一句，base64 网址并不可取，因为它们会重复数据。只需抓住一个指向文件的 blob 指针并使用它：

var file = e.dataTransfer.files[0];
var src = (window.URL || window.webkitURL).createObjectURL(file);
$("<img>", src: src).appendTo("body");

见

http://jsfiddle.net/LrmDw/3/

^{我不知道具体是哪些，但我从来不用关心}

【讨论】：

这是为什么呢？在这种情况下，“drop”的“默认”行为是什么？那个小提琴对我没有任何意义。

@Pointy 在浏览器中打开文件并离开页面。立即将文件拖到此页面.. 它会离开。在 jsfiddle 中，将任意文件拖放到拖放区。

嗯，好吧，我想它确实对我有用:-)（我的意思是“drop”有效；preventDefault() 我猜不是。）

@Pointy preventDefault 是为了防止浏览器打开文件，以便您可以读取其内容

你能解释一下你第一句话中“需要”后面的星号吗？如果我阻止了 dropping 文件的默认事件，我为什么还要关心阻止其他事件的默认操作？对我来说听起来像是一个错误，因为浏览器只会在文件拖放时导航到文件的内容，而不是在文件被拖动到文档上时。