Capítulo 16

Eventos - contextmenu

JavaScript

<script type="text/javascript">
var EventUtil = {
	addHandler: function() {...},
	getEvent: function(event) {...},
	preventDefaut: function(event) {...}
}
window.onload = function() {
	var div = document.getElementById("demo");	
	var lis = document.getElementsByTagName("li");
	EventUtil.addHandler(div, "contextmenu", function(event) {
	event = EventUtil.getEvent(event);
	EventUtil.preventDefault(event);
	var cmenu = document.getElementById("cmenu");
	cmenu.style.left = event.clientX + "px"; 
	cmenu.style.top = event.clientY + document.documentElement.scrollTop + "px";
	});
	lis[0].onclick = function() {
	div.style.fontSize = "25px";
	};
	lis[1].onclick = function() {
	div.style.fontSize = "";
	};
	lis[2].onclick = function() {
	div.style.background = "black";
	div.style.color = "white";
	};
	lis[3].onclick = function() {
	div.style.background = "";
	div.style.color = "";
	};
	EventUtil.addHandler(document, "click", function(event) {
	cmenu.style.top = "-10000px";
	})
}
</script>

HTML

...
<div id="demo">Clique com o botão direito do mouse nesse DIV</div>
<ul id="cmenu">
	<li>Aumentar tamanho da fonte</li>
	<li class="sep">Fonte normal</li>
	<li>Alto contraste</li>
	<li>Contraste normal</li>
</ul>
...
Clique com o botão direito do mouse nesse DIV