Question

我遇到了问题，即调用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>

Answer 1

删除答案：

您需要结合使用e.preventDefault() 使用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.');
});

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

我直接在身体和身体上使用了e.preventDefault（）;文档，以确保它不会重定向浏览器，虽然在的事件中使用e.preventDefault()和e.stopPropogation()应该完成此操作，我宁愿安全而不是抱歉。< / p>

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

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

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

最后，e.dataTransfer.files不存在。你需要e.originalEvent.dataTransfer.files（尽管你已经写过了，但由于不同方法中事件的范围，我不确定是这样的。）

html5拖放e.stopPropagation（）;

1 个答案: