Question

我有这段简单的代码，由于某种原因适用于除Mozilla之外的所有浏览器。

这是我的HTML：

<img src="{{#asset}}menu_button.svg{{/asset}}" id="menu_button"></img>
<img src="{{#asset}}exit.svg{{/asset}}" id="exit"></img>

这是我的代码：

$(document).ready(function(){
    $("#menu_button").click(function(event){
    show();      
    });
    $("#exit").click(function(event){
    hide();      
    });
});   

function show(element){
      event.preventDefault();
    $('#background_mobile_portrait').addClass('blur');
    $('#background_mobile_landscape').addClass('blur');
    $('.links').css('opacity', '1');
    $('#menu_button').css('opacity', '0');
    $('#exit').css('opacity', '1').css('z-index', '999');

}        


function hide(){
      event.preventDefault();
         $('#background_mobile_portrait').removeClass('blur');
         $('#background_mobile_landscape').removeClass('blur');
         $('.links').css('opacity', '0');
         $('#exit').css('opacity', '0').css('z-index', '-1');
         $('#menu_button').css('opacity', '1');
      }

在Firefox中单击图像时，没有任何反应。所有其他浏览器都像魅力一样。我一直关注这篇帖子，提到了onclick执行的问题： Div onclick event not called in Mozilla

我已应用所建议的更改但未成功。

有什么想法吗？

谢谢，马坦

Answer 1

您的问题是您没有将event对象传递给该函数。

它适用于IE和Chrome，因为它们定义了window.event。 Firefox没有。

$(document).ready(function(){
    $("#menu_button").click(function(event){
        show(event);      
    });
    $("#exit").click(function(event){
        hide(event);      
    });
});

然后为每个函数定义第一个参数以接收event对象。

function show(event) {
    // ...
}

function hide(event) {
    // ...
}

而且仅供参考，你可以这样做：

$(document).ready(function(){
    $("#menu_button").click(show);
    $("#exit").click(hide);
});

现在this将是您的元素，第一个参数将获得event。

Answer 2

可能无法解决问题，但无论如何应使用/＆gt;关闭图像标记。（或只是。＆gt;）请参阅How to close <img> tag properly?

.click（）执行在mozilla firefox中不起作用

2 个答案: