event.preventdefault not working in Firefox

Question

I am using the below bit of jQuery to toggle hidden divs. Working in all but Firefox and I know the error is (ReferenceError: event is not defined) but I'm not sure where to define the event so if anyone is able to help that would be great. Thanks in advance!

Each button is written as:

<div class="btn_view"><a href="#" onclick="toggle_visibility('all-avon',this);">VIEW TYRES</a></div>

jQuery:

function toggle_visibility (id,el) {
    $('.btn_view a').html('VIEW PRODUCTS’);
    event.preventDefault();
    $('.price-text').show();
    $('.model-price-sm').show();
    var e = document.getElementById(id);
    if (e.style.display == 'block') 
    {
        e.style.display = 'none';
        $(el).html('VIEW ALL');
    }
    else 
    {
        e.style.display = 'block';
        $(el).html('HIDE PRODUCTS’);
        $(el).parent().parent().find('.price-text').hide();
        $(el).parent().parent().find('.model-price-sm').hide();
        //$(el).parent().prev('.price-text').hide();
    }

    hideAllBut(id);
}

function hideAllBut(id) {
    var lists = document.querySelectorAll('.reveal');
    for (var i = lists.length; i--; ) {
        if (lists[i].id != id) {
            lists[i].style.display = 'none';
        }
    }
}

score 4 · Accepted Answer · answered Dec 13 '13 at 13:02

4

In FireFox, you can pass the event object in as a parameter e.g.:

<div class="btn_view"><a href="#" onclick="toggle_visibility('all-avon',this, event);">VIEW TYRES</a></div>

function toggle_visibility (id,el, e) (then use e.preventDefault, just to make it separate to window.event in IE etc)

Although, as you are using jQuery, I would suggest doing what Sergio mentioned above/below.

answered Dec 13 '13 at 13:02

Benno

3,008
3
26
41

http://stackoverflow.com/questions/16404327/how-to-pass-event-as-argument-to-an-inline-event-handler-in-javascript – WaiKit Kung Dec 14 '13 at 13:32

score 3 · Answer 2 · answered Apr 09 '14 at 03:48

3

Instead of using "event.preventDefault()" you could use "return false". It probably will solve your problem in Firefox.

Cheers

answered Apr 09 '14 at 03:48

Ricardo de Assuncao Goncalves

1,069
12
9

Sergio · Answer 3 · 2013-12-13T13:00:03.820

2

You have a typo:

.html('VIEW PRODUCTS’); 
                    ^

and also same typo here .html('HIDE PRODUCTS’);

Apart from that its better to avoid inline script, so you could use:

$('.btn_view a').click(function(event){
    event.preventDefault();
    toggle_visibility (id,el)
});

edited Dec 13 '13 at 13:00

answered Dec 13 '13 at 12:55

Sergio

28,539
11
85
132

Thanks for the quick reply. I need each button to open a different hidden div so not sure this works? – fsylothian Dec 13 '13 at 13:06
@fsylothian can you post your whole html? – Sergio Dec 13 '13 at 13:07
@fsylothian, you can always add a data attribute to the anchors. Such as data-target-id="targetId". Then in the click function above you would do toggle_visibility($(this).attr('data-target-id'), this); – darkrat Mar 20 '14 at 16:01

event.preventdefault not working in Firefox

3 Answers3