admin管理员组文章数量:1336599
I have got the problem, that a window with the file content pops up though e.stopPropagation() is called. When I drag the file from the desktop in the div in my browser, my current tab is reloaded with the new content (pictures, text). As a browser I am using Chrome, but I have also tried it with Safari and Firefox!
I simply don't get it, here's my code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>File Uploader</title>
<link href="../styles/allgemein.css" rel="stylesheet" type="text/css"/>
<link href='+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href=".10.3/themes/smoothness/jquery-ui.css"/>
<script src=".9.1.js"></script>
<script src=".10.3/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn/bootstrap/3.0.2/css/bootstrap.min.css">//-->
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn/bootstrap/3.0.2/css/bootstrap-theme.min.css">//-->
<!--<script src="//netdna.bootstrapcdn/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>
I have got the problem, that a window with the file content pops up though e.stopPropagation() is called. When I drag the file from the desktop in the div in my browser, my current tab is reloaded with the new content (pictures, text). As a browser I am using Chrome, but I have also tried it with Safari and Firefox!
I simply don't get it, here's my code:
<!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./css?family=Prosto+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery./ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script src="http://code.jquery./ui/1.10.3/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn./bootstrap/3.0.2/css/bootstrap.min.css">//-->
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn./bootstrap/3.0.2/css/bootstrap-theme.min.css">//-->
<!--<script src="//netdna.bootstrapcdn./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>
- I answered then realized you're already doing what I suggested. I'll re-read the code, but e.stopPropagation() prevents parent elements from receiving the event. e.preventDefault() is what prevents the default behavior of loading the file. Perhaps e is out of scope? – MaKR Commented Dec 3, 2013 at 17:24
- 1 hm, now i got it ;) the drag also has to be handled! – user3061909 Commented Dec 9, 2013 at 15:37
1 Answer
Reset to default 6Deleted Answer:
You'll need to use
e.preventDefault()in conjunction withe.stopPropogation()as the default behavior is to load the file in the current tab.
Why it's wrong is that you had preventDefault, but it's also possible the event is out of scope. e.stopPropogation() will only prevent the event from going higher up the DOM tree to parent elements. Here's some clean-up of the code that tested fine for me:
$(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.');
});
I removed </script><script> as you can just continue the previous.
I used e.preventDefault() directly on both body & document to make sure it's not going to redirect the browser, although using both e.preventDefault() and e.stopPropogation() in the event should acplish this, I'd rather be safe than sorry.
I made the functions inline using JQuery's .on() which has proven to be the most reliable way to me of binding events.
I also added some classes that are set/unset during the events, really just copy/paste remnants from code I use, but they're useful for styling the elements when events occur. Leave them or delete them, this is more for the user than yourself.
Next, you'll want to make sure the browser is capable of window.FileReader as there is no IE support below version 10.
Last, e.dataTransfer.files does not exist. You'll need e.originalEvent.dataTransfer.files (although as you've written it I'm not sure it's that way due to the scope of the event in the different methods).
本文标签： javascripthtml5 dragdrop estopPropagation()Stack Overflow
版权声明：本文标题：javascript - html5 dragdrop e.stopPropagation(); - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742409776a2469552.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论