html5 拖放 e.stopPropagation();

Question

html5 拖放 e.stopPropagation();

我遇到了问题，尽管e.stopPropagation()调用了一个包含文件内容的窗口。当我从div浏览器中的桌面拖动文件时，我当前的选项卡会重新加载新内容（图片、文本）。作为浏览器，我使用 Chrome，但我也尝试过 Safari 和 Firefox！我只是不明白，这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>File Uploader</title>
    <link href="../styles/allgemein.css" rel="stylesheet" type="text/css"/>
    <link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">//-->
    <!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">//-->
    <!--<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>//-->
</head>

<body style="position:relative;">
<script>
    var dropZone = document.getElementById('drag_upload');
    dropZone.addEventListener('drop', handleDrop, false);
</script>
<script>
    $(document).ready(function () {
        $("#home").button();
        $("#frm_logout").button();
    });

    function handleDrop(e) {
        e.stopPropagation(); // Stops some browsers from redirecting.
        e.preventDefault();

        var files = e.dataTransfer.files;
        for (var i = 0, f; f = files[i]; i++) {
            alert(files[i]);
        }
    }
</script>
<div style="width:100%; text-align:center; font-family: Arial; font-size:28px;"><b>Cloudservice</b></div>
<form action="../" method="post">
    <input type="submit" name="logout" value="Logout" id="frm_logout" style="z-index: 1000; float:right;"/>
</form>
<a href="../"><input type="button" value="Home" id="home"/></a>

<div style="width:100%; font-size:18px; text-align:left; font-family:Arial; position:absolute; left:5px; top:100px;">
    <?php echo "User: " . $user . "<br/>Maximum <br/>upload size: " . $size . " MB<br/><br/>"; ?>
    <a href="fileupload">
        <div
            style="width: 125px; height: 40px; background-color: #003366; text-align: center; font-family: Arial; border-radius: 10px; color:#CCC;">
            <div style="top: 10px; position: relative;">Fileupload</div>
        </div>
    </a><br/>

    <div style="width: 250px; height: 435px; border: 2px solid #003366; border-radius: 15px;">
        <div style="position: relative; top:200px; text-align: center;" id="drag_upload">Drop File here to upload!</div>
    </div>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

MaK*_*aKR 6

删除答案：

您需要e.preventDefault()与 with 结合使用，e.stopPropogation()因为默认行为是在当前选项卡中加载文件。

错误的原因是您使用了 preventDefault，但也有可能该事件超出了范围。e.stopPropogation() 只会阻止事件从 DOM 树向上移动到父元素。以下是对我测试良好的代码的一些清理：

$(document).ready(function () {
    $("#home").button();
    $("#frm_logout").button();
});

$('body').on('dragover drop', function(e) { e.preventDefault(); });
$(document).on('draginit dragstart dragover dragend drag drop', function(e) {
    e.stopPropagation();
    e.preventDefault();
});

$("#drag_upload").on('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).addClass('dragHover');
}).on('dragleave dragend', function(e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).removeClass('dragHover');
}).on('drop', function(e) {
    e.stopPropagation();    // Stops parent elements from receiving event.
    e.preventDefault();     // Stops some browsers from redirecting.
    $(this).removeClass('dragHover');
    $(this).addClass('loading');

    if (window.FileReader) {
        if (e.originalEvent.dataTransfer.files.length<1) {
            // do stuff here
        }
    }
    else alert('Internet Explorer 9 and below are not supported for this feature.');
});

Run Code Online (Sandbox Code Playgroud)

我删除了，</script><script>因为您可以继续前一个。

我直接在 body 和 document 上使用了 e.preventDefault() 以确保它不会重定向浏览器，尽管同时使用两者e.preventDefault()并且e.stopPropogation()如果应该实现这一点，我宁愿安全而不是抱歉。

我使用 JQuery 使函数内联.on()，这已被证明是我绑定事件的最可靠方法。

我还添加了一些在事件期间设置/取消设置的类，实际上只是从我使用的代码中复制/粘贴剩余部分，但它们对于在事件发生时设置元素样式很有用。留下或删除它们，这对用户来说比对自己更重要。

接下来，您需要确保浏览器能够运行，window.FileReader因为版本 10 以下不支持 IE。

最后，e.dataTransfer.files不存在。您将需要e.originalEvent.dataTransfer.files（尽管在您编写它时，由于不同方法中事件的范围，我不确定是不是这样）。

归档时间：	12 年，1 月前
查看次数：	6927 次
最近记录：	12 年，1 月前