javascript - event.target/srcElement 在 Chrome 和 Opera 中不能 100% 工作

标签 javascript events google-chrome opera target

我正在尝试获取图像映射的 HTML “area” 元素的 target/srcElement

这是我目前所拥有的(请原谅数据 URI):

<map name="dpad">
  <area id="dpad"shape="rect" alt="" title="" coords="1,14,12,24" onmousedown="move('l',false,event);" target="" />
  <area shape="rect" alt="" title="" coords="15,2,24,12" onmousedown="move('u');" target="" />
  <area shape="rect" alt="" title="" coords="27,15,38,24" onmousedown="move('r');" target="" />
  <area shape="rect" alt="" title="" coords="15,27,25,38" onmousedown="move('d');" target=""/>
</map>
<img width="40"height="40"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAADDElEQVRYR+2ZvYoiQRSFW1EMVkEzI2XfydQH2GwGDTfczFRYNNBBUDFQUFN9ATXQwEEDRQ3UB3ADQajpr7Gkp8f+k2G6F2bg0jVVt+qcrp9zb5cBxeVfMpmMnE6nX+fz+U8kEvkRCoUsR7hcLorq+0/1/R2NRv8ej8ezS0h37uFwOBEMBkupVErk83lRKBQsDR986UNfd2gPeAcCgYRqpUwmI+bzuTgcDjcbj8cC09fhgy996PsApLsukmA2mxWLxeJGhnKz2dTMWI+vpwRXq5XodDqi3W5rRpk6ZhKynhLc7XZiMBiIVqsler2eZpSpo81zgqPRSDQaDdHtdkW/39eMMnXsR08JTqdTUSqVRK1WE/V6/Z1RVy6XBT6eLTEzNJlMLA0fzwjqT6teWvRlT5f4myASnU6nI4SgqwA7ef5UfV+MQu1giV/UfvR1gpGAE9wUNYA/EyevSu/kCdDrAwRfeTGnOHCKxWLPipqNnAjmxEtAnVqxWBTr9fpd3L03i/jg63Rc/OACJ7gxg1pWQlBn0+sNDZNia2wDeL/f3wgSNWazmWaUJVl88DX253/GBsPYBhc4wU2Jx+NauqR/ewCIEIgwOme2v6jfbDZiOByKarWqCTZWqVS0UEebVV/GBgMs/UvRB05w+0CQIM/ghCrA7AhCjihCDJahjjJ1tNkRBAMsMGWCYUqQqSYTIdgTTwGxIshbM3N6cnqStG23W1OSjA0GWGCCLbX1wwyyH8jlSJckoB1B9hszIEkZn7ThYzaLkiD9wAQbDnD5/wjylsvl8lOXmMPidonh8GWHhI3/qYdEDsbmZx+Qz9md4nsyw+HgBDuRGTDAMpUZxDCXy5kKNQTviaxRqFlKKdT6ZbUSasY2E2o4aULt+1BHQPZ1suD7dMvdZ7uimH24O8gHvb1Z+CbodKn1Sywvi+yenn12omEIrUyZSJuk+eLDXWbFvr36gKDvL484vb6+fpPy4rsLTN9eAesv0ck47C7R8fnSS3R+hlDToCeV6Il0iE9DK8Pn6vtEX6d6K/3eAH0oKaUOiMCyAAAAAElFTkSuQmCC"usemap="#dpad"/>

所以,对于 dpad 上的左箭头,我有一个函数被称为 onmousedownmove(dir,hold,e)

这里是启动的函数:

function move(dir,hold,e){
    var p=document.getElementById('test');
    alert(e);
}

这让我很困惑,为什么我在点击该区域时得到 "undefined"。有人可以详细解释我如何获得目标吗?

我是否需要在我的 HTML 代码中包含 'event' 作为参数?我什至需要一个参数吗?

另一方面,有些事情让我很困惑。

所以,我无法获取该元素的目标,但这工作得很好:

<div class="male1-d" id="test" data-sprite="male1" onclick="alert(event.target+' '+this.style.left+' '+this.style.top);"></div>

完成。目标达成。为什么我不能在函数中执行此操作?

我忘了说,对于 Opera,我指的是移动版(?)9.50 版。

最佳答案

在一些浏览器中,'event'是window的一个属性。但是你需要在其他浏览器中包含'event'作为参数。所以你的移动函数应该如下所示:

 <html>
   <body>
     <button onmousedown='move(event)' id='btn' name='a button'>click</button>
   </body>
   <script>
     function move(e){
       var e=e||window.event;
       var target=e.target||e.srcElement;
       alert(target);
       alert(target.id);
       alert(target.name);
    }
  </script>
 </html>

关于javascript - event.target/srcElement 在 Chrome 和 Opera 中不能 100% 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14313252/

相关文章:

javascript - 识别具有溢出的元素的可见部分

iFrame 中的 JavaScript 修改 iFrame 之外的对象

javascript - CSS,jQuery - 延迟失去最小高度的焦点

javascript - 在 JavaScript 中给定路径和元素数组构建自定义对象

java - 通用的、注解驱动的事件通知框架

c# - 允许在 ChromeDriver 中进行多次下载

javascript - 在 chrome 扩展中尝试 OAuth 时如何解决登录屏幕永无止境的循环?

Azure:运行大量任务的最佳架构,每个任务需要 5 到 10 秒(从 Web api 触发)?

Javascript如何将一个类的索引值传递给函数内的另一个类?

javascript - `map()` 的奇怪行为