Question

我有两张地图：

var map1 = document.id('map1');
var map2 = document.id('map2');

隐藏第二张地图。

map2.setStyle('display','none');

在第一个地图上有一个具有唯一ID的元素（链接） - 我想在单击此元素时运行另一个函数（隐藏第一个地图并显示第二个地图）。

我有：

  var links = document.id('map1').getElements('a');     

  links.each(function(link) { 
  link.addEvent('click', function(e) {
   e.stop();
    //do something with links
  });

我试着这样：

var unique_link = document.id('my_unique_id').getElements('a');

unique_link.addEvent("click", function(){
links.removeEvent('click');
map1.setStyle('display','none');
map2.setStyle('display','block');
var links = document.id('map2').getElements('a'); 
});

但是当我点击这个唯一元素时，第一个函数仍在运行。

Answer 1

Element.removeEvent无法正常工作。它要求您传递两者事件的名称（单击）和处理它的函数。这是因为在click被触发时可能会有多个函数被调用。您可以使用Element.removeEvents删除所有点击处理功能，但这可能不是您真正想要的（虽然它可能很好）。为了做到最好，你要做到这一点：

var handler = function(e) { e.stop(); /* do something with links */ }),
    links = document.id('map1').getElements('a');

links.addEvent('click', handler);

document.id('my_unique_id').getElements('a').addEvent('click', function() {
    links.removeEvent('click', handler);
    /* Other stuff */
});

哦，顺便说一下，这个：

document.id('some_id').getElements('.some-selector');

可以这样写：

$$('#some_id .some-selector');

Answer 2

我对您的问题的理解是，您尝试在地图之间切换，当您切换时，点击事件处理程序会附加到地图链接。

首先进行切换，您需要跟踪哪一个是可见的，以便您可以正确隐藏它并使另一个可见：

var unique_link = $$('#my_unique_id a'),
    // keep track of which map is visible
    currentMap = map1;

unique_link.addEvent('click', function(e){
    // Prevent the default behavior, but still allow bubbling of events
    e.preventDefault();

    // Hide the current map
    currentMap.setStyle('display', 'none');

    // store the correct map by comparing the two maps and making it visible
    currentMap = (currentMap == map1 ? map2 : map1).setStyle('display', 'block');

});

澄清一下，currentMap = (currentMap == map1 ? map2 : map1)被称为三元手术。它是if / else的简写，可以改写为：

if (currentMap == map1) {
    currentMap = map2;
} else {
    currentMap = map1;
}

currentMap.setStyle('display', 'block');

接下来，为什么需要删除每个地图中链接上的事件？当你在地图之间切换时，他们无法保持联系吗？

最后，您询问了有关事件委派和访问点击的值。以下是MooTools中如何工作的示例：

// We pass an array of map1 and map2 through $$ to make sure that the returned value is an element collection
// So we can use addEvent on both elements.

// The event "type" we would have passed to addEvent has changed, using a psuedo event called "relay", which handles event delegation
// It takes a selector for matching elements

// The function that is passed to addEvent has two arugments, e, which is the event object, and element, which is the element that the
// event is being delegated to.
$$([map1, map2]).addEvent('click:relay(a)', function(e, element){
    // Prevent the default behavior of the anchors
    e.preventDefault();

    // element argument is the anchor. So you can access it this way.
   element.get('href');

   // or "this" can also be used.
   this.get('href');

});

在除了一个元素之外的每个元素上运行mootools函数

2 个答案: