Question

我注意到我的代码在浏览器版本之间提供了不同的输出。奇怪的是，在IE11中使用它会返回图像的路径，并使用chrome返回元素ID。我的问题是，我如何更改代码才能使其正常工作？

   <script>
    $(document).ready(function(){
            $("#test1, #test2, #test3").click(function testfunc(event) {
                var testvar = event.target.tagName;
                var testvarr = $(this).attr('id');
                var testvarrr = $(testvar + "#" + testvarr).attr("src");
                var target = $(event.target);
                alert(testvar);
                alert(testvarr);
                alert(testvarrr);// debug I will use this later for a overlay in the same window
            });
        })
        function allowDrop(ev) {
            ev.preventDefault();
        }
        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id); // this is different between browsers 
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            var array = ["#een", "#twee", "#drie"];

            for(i = 0; i < array.length; i++) {
                if($(array[i]).children().length < 1 && $(ev.target).attr('id') == array[i].replace("#", "")) {
                        if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
                            alert("hi you use IE");
                            alert(data);// returns the location of the image
                            document.getElementById(array[i].replace("#", "")).appendChild(document.getElementById(data));
                        }else{ 
                            document.getElementById(array[i].replace("#", "")).appendChild(document.getElementById(data));
                            alert("hello");
                            alert(data); // returns the ID of the element
                        }
                    return;
                }
            }
        }
    </script>
    <div class="midden">
        <div id="een" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="twee" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="drie" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </div>
    <p id="demo"></p>
    <img id="test1" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69">
    <a href="ster.gif" target="_blank"><img id="test2" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69"></a><br>
    <a href="ster.gif" target="_blank"><img id="test3" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69"></a>

		$(document).ready(function() {
		  $("#test1, #test2, #test3").click(function testfunc(event) {
		    var testvar = event.target.tagName;
		    var testvarr = $(this).attr('id');
		    var testvarrr = $(testvar + "#" + testvarr).attr("src");
		    var target = $(event.target);
		    alert(testvar);
		    alert(testvarr);
		    alert(testvarrr); // debug I will use this later for a overlay in the same window
		  });
		})

		function allowDrop(ev) {
		  ev.preventDefault();
		}

		function drag(ev) {
		  ev.dataTransfer.setData("text", ev.target.id); // this is different between browsers 
		}

		function drop(ev) {
		  ev.preventDefault();
		  var data = ev.dataTransfer.getData("text");
		  var array = ["#een", "#twee", "#drie"];

		  for (i = 0; i < array.length; i++) {
		    if ($(array[i]).children().length < 1 && $(ev.target).attr('id') == array[i].replace("#", "")) {
		      if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {
		        alert("hi you use IE");
		        alert(data); // returns the location of the image
		        document.getElementById(array[i].replace("#", "")).appendChild(document.getElementById(data));
		      } else {
		        document.getElementById(array[i].replace("#", "")).appendChild(document.getElementById(data));
		        alert("hello");
		        alert(data); // returns the ID of the element
		      }
		      return;
		    }
		  }
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="midden">
  <div id="een" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="twee" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="drie" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<p id="demo"></p>
<img id="test1" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69">
<a href="ster.gif" target="_blank">
  <img id="test2" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69">
</a>
<br>
<a href="ster.gif" target="_blank">
  <img id="test3" draggable="true" ondragstart="drag(event)" onclick="function testfunc(event)" src="ster.gif" width="118" height="69">
</a>

更新

好的，我修改了代码，我改变了两件事：

- 将目标更改为srcElement。
- 删除了a标签（图像的父母）

删除了a标签，因为它改变了数据变量的结果。（这不是chrome的问题）总的来说，似乎它可能是浏览器兼容性的问题。

我改变的代码： ev.dataTransfer.setData("text", ev.srcElement.id);： ev.dataTransfer.setData("text", ev.target.id);

Answer 1

好的，我修改了代码，我改变了两件事：

- 将目标改为srcElement - 删除了a标签（图像的父母）

删除了a标签，因为它改变了数据变量的结果。（这不是chrome的问题）总的来说，似乎它可能是浏览器兼容性的问题。

我改变的代码： ev.dataTransfer.setData("text", ev.srcElement.id);： ev.dataTransfer.setData("text", ev.target.id);

我要感谢rfornal帮助我解决这个问题。

dataTransfer在IE11中无法正常工作

1 个答案: