(EDIT: is there an event that has the same bubbling as a onmouseleave but for oncontextmenu?)
This program is complex because it exchanges functions/code between iframes
. However that isn't my problem. My problem is that I have a large amount of divs that are loaded into the document via xml, php, and ajax. Each div has a oncontextmenu
event setup. Each div has an auto incrementing id set when the php echos the contents back via ajax. As you can see, each div has many other elements inside.
My problem is that the script doesn't give the id when I click on the image or other elements inside the div.
All in all I want to get the id when I click on the div or any elements inside it. If possible, could you explain a event capture/bubble solution? Here is that code:
$xml = simplexml_load_file('xml/birds.xml');
foreach($xml->bird as $bird)
{
$images = explode(",",$bird->image);
echo '<div class=\'birdContainers\' id="'.$bird->id.'">';
echo '<span class="birdName">'.$bird->name.'</span>';
echo '<img class="thumbImage" src="images/'.$images[0].'">';
echo $bird->fourLetterCode;
echo '<div class="birdButtons"><input type="button" class="edit" onclick="alert(\'open popup for editing see line 10 inside php/getBirds.php\');" value="Edit"><input type="button" class="delete" value="Delete" onclick="alert(\'delete see line 10 inside php/getBirds.php\');"></div>';
echo "</div>";
}
Here is the javascript which adds the oncontextmenu event to all the divs:
$('#birds').load('php/getBirds.php', function(){
var birdContainers = document.getElementsByClassName('birdContainers');
for(var i = 0; i != birdContainers.length; i++)
{
if (birdContainers[i].addEventListener) {
birdContainers[i].addEventListener('contextmenu', function(e) {var mouseX = e.clientX || e.pageX; var mouseY = e.clientY || e.pageY; window.parent.document.getElementById('menu').style.left = mouseX+20+'px'; alert(e.target.id); window.parent.document.getElementById('menu').style.top = mouseY+100+'px'; window.parent.document.getElementById('menu').style.display = 'block'; this.style.borderColor = '#3B87FF'; e.preventDefault();}, true);
birdContainers[i].addEventListener("dblclick", function(event){openBird(this.id);}, true);
birdContainers[i].addEventListener("click", function(event){this.style.borderColor = '#3B87FF';}, true);
} else if (birdContainers[i].attachEvent) {
birdContainers[i].attachEvent("dblclick", function(event){openBird(this.id);}, true);
birdContainers[i].attachEvent("click", function(event){this.style.borderColor = '#3B87FF';}, true);
birdContainers[i].attachEvent('contextmenu', function(e) {var mouseX = e.clientX || e.pageX; var mouseY = e.clientY || e.pageY; window.parent.document.getElementById('menu').style.left = mouseX+20+'px'; window.parent.document.getElementById('menu').style.top = mouseY+100+'px'; window.parent.document.getElementById('menu').style.display = 'block'; this.style.borderColor = '#3B87FF'; e.preventDefault();}, false);
}
}
});
Here is the function that runs when the button inside my custom contextmenu is running:
<div id="menu">
<input type="button" value="Open" onclick="document.getElementById('browse').contentWindow.openBird(i need to put the id variable here of the element clicked on when the oncontextmenu event was/is fired.);">
</div>
I hope you understand what I'm asking. If not post a comment below. Thank you.