javascript - jQuery maphilight 使用 "onclick"方法

Question

我正在使用 maphilight 插件，它适用于具有“usemap”属性的图像，并在鼠标悬停时勾勒出 map 中定义的区域。

(此处的文档:http://davidlynch.org/projects/maphilight/docs/)。

我会用 onClick 事件而不是“onmouseover”来触发高亮效果。

我这样做:

jQuery('.area').click(function(e){
    e.preventDefault();
    
    var data = jQuery(this).mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    jQuery(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    
});

它工作正常，但我想在我再次点击时删除高亮效果。

有什么想法吗？

Answer 1

查找这部分代码并更改:

            $(map).trigger('alwaysOn.maphilight').find('area[coords]')
            .bind('mouseover.maphilight', mouseover)
            .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });

对此:

            $(map).trigger('alwaysOn.maphilight').find('area[coords]')
            .bind('click.maphilight', mouseover)
            .bind('mouseout.maphilight', function(e) { clear_canvas(canvas); });

将“鼠标悬停”事件更改为“单击”即可。