Ok, simple question:
<div onclick="javascript:manualToggle(this)">
<span>Allowed to click</span>
<span>Not allowed to click</span>
<span>Allowed to click</span>
</div>
Without replicating the manualToggle on to the 2 spans that are allowed to click, how can I prevent the "Not allowed to click" span from firing it's parent div onclick event when it is clicked on?
Possible solution: give the span's id's and check whether the clicked id is allowed to be clicked in your function
bad idea: you don't know which span is clicked since you call the function from your div...
with mootools you can use the method stopPropagation:
$('myChild').addEvent('click', function(event){
event.stopPropagation(); // this will prevent the event to bubble up, and fire the parent's click event.
});
see http://mootools.net/docs/core/Native/Event#Event%3AstopPropagation
also see this very similar question: http://stackoverflow.com/questions/985389/how-can-i-stop-an-onclick-event-from-firing-for-parent-element-when-child-is-clic
You need an event handler (it's very easy to do this in something like jQuery) that catches clicks for the spans within the div and only fires the function if, for example, the span has/hasn't a particular class.
Give the span an id an attach onclick event to it and use
A jQuery sample
$("#spn2").click(function(event){
event.stopPropagation();
});
event.stopPropagation(): Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
It would make sense to use a library but without you can try this (edited with an entire page to test):
<html><head></head>
<body>
<script type="text/javascript"><!--
function manualToggle(val)
{
alert(val.id);
}
--></script>
<div id="test" onclick="manualToggle(this);">
<span>Allowed to click</span>
<span onclick="event.cancelBubble=true;if (event.stopPropagation) event.stopPropagation();">Not allowed to click</span>
<span>Allowed to click</span>
</div>
</body>
</html>
you fnord is no help! its the second time i end up here. you fools tell everyone use jquery BULLSHIT!
function event(e)
{
if(!e) e = window.event if(e.srcElement) e.target = e.srcElement; return e; }
function clear(e)
{
e = event(e); e.fromchild = e.target.parentNode;
}
function gotoCategory(e)
{
e = event(e); trace(e,e.target, e.fromchild);
if(e.fromchild) // FYI GFY
else //notfromchild
}
function trace()
{
try{console.log(trace.arguments)}catch(e){return;}
}
wrapper.onclick = gotoCategory;
img.onclick = clear;
title.onclick = clear;