using document.onclick overrides other onclick events

Question

0.00/5 (No votes)

See more:

Using document.onclick event to hide a div popup in Javascript, overrides my other button click events. I tried a to capture the element id and then trigger the button click, but that didnt work either.
Any idea how to stop this and still have my button clicks work ?

Posted 2-Oct-12 7:03am

Teenustar

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

enhzflep · Answer 1 · 2012-10-02T07:26:00

The trick is to use addEventListener. Adding a function in the HTML means the function is anonymous and can't be removed without setting onclick=''.

Using addEventListener means you can attach multiple handlers to an event. It also means that you can selectively remove them later.

I should point out that, AFAIK while I added them in the order func1, func2, the browser is under no obligation to execute them in this order.

HTML

<html>
<head>
<style>
</style>

<script>
function func1()
{
	// hello world! #1
	alert('func1');
}
function func2()
{
	// hello world! #2
	alert('func2');
	
	// get the button and remove the func1 handler
	// this means we'll see 2 alert boxes the first time round 'func1' then 'func2'
	// but any subsequent clicks will only trigger 1 alert-box 'func2'
	var btnElement = document.getElementById('myBtn');
	btnElement.removeEventListener('click', func1, false);
}

function myInit()
{
	var btnElement = document.getElementById('myBtn');
	btnElement.addEventListener('click', func1, false);
	btnElement.addEventListener('click', func2, false);
}
</script>

</head>
<body onload='myInit();'>
	<input id='myBtn' value='click me' type='button'/>
</body>
</html>

enhzflep · Answer 2 · 2012-10-02T12:11:00

Something like this perhaps?

HTML

<!DOCTYPE html>
<html>
<head>
<style>
/* just something to let us see where it is */
#showMe
{
    width: 200px;
    height: 75px;
    border: solid 3px red;
}
</style>

<script>
function byId(e){return document.getElementById(e);}

// flag used in the onmouseout and onmouse over listeners for the 'Show/Hide' btn
// used to ensure we only have 1 valid listener at a time. If mouse enters button, no need to listen for body mouse-clicks
// if mouse leaves button, no need to listen for button clicks
// (prevents both the btnClick and bodyClick functions firing when the pop-up is shown and the button is clicked - 2 events
// means the pop-up is closed then opened again - albeit too fast to see. The pop-up appears to remain motionless/unchanged.
var isVisible = false;

// handle cliks on the show/hide button
// just toggle the visible state
function btnClick(e)
{
    var tgt = document.getElementById('showMe');
    switch (isVisible)
    {
        case false:
            tgt.style.display = '';
            isVisible = true;
            break;

        default:
            tgt.style.display = 'none';
            isVisible = false;
    }
}

// handle clicks on the document body
//
// first make sure we don't come from a click on either the show/hide button or the popup itself.
// then re-attach the listener to the button and remove it from the body. - clicking the body with the popup close
// should do nothing. Clicking the button on the other hand, definitely should do something
function bodyClick(e)
{
    e = e || event;
    var tgt = document.getElementById('showMe');
    if ( ( e.srcElement != byId('showMe')) && (e.srcElement != byId('mBtn')) )
    {
        tgt.style.display = 'none';
        isVisible = false;
        document.removeEventListener('click', bodyClick, true);
        byId('mBtn').addEventListener('click', btnClick, true);
    }
}


function myInit()
{
        // fire the event whenever we click the show/hide btn
        byId('mBtn').addEventListener('click', btnClick, true);

        byId('mBtn').addEventListener(
                                        'mouseover',
                                        function()
                                        {
                                            if (isVisible)
                                            {
                                                document.removeEventListener('click', bodyClick, true);
                                                byId('mBtn').addEventListener('click', btnClick, true);
                                            }
                                        },
                                        true);


        byId('mBtn').addEventListener(
                                        'mouseout',
                                        function()
                                        {
                                            if (isVisible)
                                            {
                                                document.addEventListener('click', bodyClick, true);
                                                byId('mBtn').removeEventListener('click', btnClick, true);
                                            }
                                        },
                                        true);
}


</script>

</head>
    <body onload='myInit();'>
        <input id='mBtn' type='button' value='Show/Hide'/>
        <div id='showMe' style='display: none;'>
            I contain hidden content. Pop-me-up!
        </div>
        <br>
        <input type='button' onclick='alert("Hello World!");' value='test alert(...)'/>
    </body>
</html>

using document.onclick overrides other onclick events

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0