Question

大家好我试图通过javascript将onclick事件添加到我通过javascript创建的地图元素中，我不会在这里粘贴整个代码，但会制作一个简短的版本。所以这就是我到目前为止所做的：

 var mapimg = createElement("img"); // create and set up img element for map 
mapimg.src "some path ";
map.img.width = some with;
map.img.height = some height;
map.usemap = "#Map"; // img element done
var map = createElement("map"); // set map element and attributes for him 
map.name = "Map";
map.id = "Map";
area(1-10) = createElement("area"); // creating a 10 areas 
area.id = some;
area.shape = some;
area.coords = some; // area allement have same attributes but with different values 
// ones i done with are append them to map and then append mapimg and map to body 

//  now trying to add on click event 

map.addEventListener("onClick",function(){
            var id = map.getElementById(this);
            var img = "images/map/reg" + id + ".jpg";
            mapimg.src = img;
        });

地图正在运行，但onclick事件无法正常工作我已经写了jquery版本，可以正常使用html元素

$(document).ready(function() {
            $('area').click(function() {
                var title = $(this).attr('title');
                var image = "images/map/reg" + title + ".jpg";
                $('.mapimg').attr('src', image);
                $('#loginsubmitbutton2').show();
                $('input[name="village"]').attr('value', title);
            })

        });

this is a full script

Answer 1

不应该 onclick 在使用addEventListener

时，它应该只是点击

    map.addEventListener("click",function(){
        var id = map.getElementById(this);
        var img = "images/map/reg" + id + ".jpg";
        mapimg.src = img;
    });

或者如果你想使用onclick

    map.onclick = function(){
        var id = map.getElementById(this);
        var img = "images/map/reg" + id + ".jpg";
        mapimg.src = img;
    };

如何将事件侦听器添加到父级内的重复元素没有循环遍历所有这些

如果你想将事件添加到父元素内的多个重复元素，而不是循环遍历所有元素并浪费内存，一个好的解决方案是使用事件传播的概念，如代码如下:(因为我了解地图是地区的父级）

map.addEventListener("click", myFunction());
//we attach an event listener to the parent

function myFunction(e){
    //e.currentTarget : to which event listener is attached
    //e.target: the element which was clicked
    if(e.target !== e.currentTarget){
       //we only need to hear events from the area (children of map), so we ignore any other events that are called when the parent is clicked by this if statement
        var id = e.target.Id;

        alert(id);
        //your code here

    }
    e.stopPropagation(); //we stop the propagation of event to the DOM once its purpose is solved 

}

此解决方案与您拥有的区域元素数量无关。你将避免使用任何for循环和浪费内存。

Answer 2

使用click而不是onclick，您只需使用id而不是getElementById

map.addEventListener("click",function(){
            var id = this.id;
            var img = "images/map/reg" + id + ".jpg";
            mapimg.src = img;
        });

Answer 3

为每个元素提供多个带有事件侦听器的元素效率很低。使用$(document)作为event.target（即点击，悬停等元素），jQuery可以轻松实现。在简单的JavaScript中，通过在多个元素的祖先上添加事件监听器也是可能的。

addEventListener()到包含元素组的元素。
event.preventDefault()如果event.target s（即您要点击的元素组）默认行为是不受欢迎的（例如，如果e.target是<a> nchor并且您没有＆＃ 39;我希望它像往常一样跳到某个地方。
设置一个条件，该条件将验证eventPhase *中的内容是event.target而不是event.currentTarget *。
在这一重要步骤之后，此时您将完成所有预期的功能任务。
在您的功能完成任务后，使用event.stopPropagation()来阻止事件冒泡*，以便其他任何事件都不会被触发。

* TD; LR了解有关事件方法和属性的详细信息：eventPhase，currentTarget和Comparison of Event Targets

另外，请阅读此article有关此特定技术的内容。

以下代码段演示了如何在<map>上使用一个事件监听器，并将每个<area>指定为唯一的event.target。要测试它，只需单击一个行星，结果将是触发click事件的event.target和msg的坐标。点击行星未覆盖的任何地方，即使event.stopPropagation()正在工作，也无法获得结果。

段

＆＃13;

var map = document.querySelector('map');

map.addEventListener("click", eventHandler, false);

function eventHandler(e) {
  e.preventDefault();
  if (e.target != e.currentTarget) {
    var clicked = e.target.coords;
    console.log('click event triggered at ' + clicked);
  }
  e.stopPropagation();
}

＆＃13;

<img src="https://s-media-cache-ak0.pinimg.com/736x/80/f3/06/80f3061369194bef1e2025d9a382d1a2.jpg" usemap='#iMap'>
<map id="iMap" name="iMap">
  <area shape="circle" alt="" title="" coords="66,179,10" href="" target="" />
  <area shape="circle" alt="" title="" coords="198,141,13" href="" target="" />
  <area shape="circle" alt="" title="" coords="152,244,17" href="" target="" />
  <area shape="circle" alt="" title="" coords="107,124,17" href="" target="" />
  <area shape="circle" alt="" title="" coords="353,203,83" href="" target="" />
  <area shape="circle" alt="" title="" coords="438,235,29" href="" target="" />
  <area shape="circle" alt="" title="" coords="482,135,25" href="" target="" />
  <area shape="circle" alt="" title="" coords="499,271,6" href="" target="" />
  <area shape="circle" alt="" title="" coords="262,243,99" href="" target="" />
  <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
</map>

＆＃13;

Javascript onlick事件到区域

3 个答案:

段