I have a VML shape in which I'm trying to prevent the browser from navigating to the href:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a, #b {
position: absolute;
top: 10px;
width: 100px;
height: 100px;
display: block;
}
#a {
left: 10px;
background: red;
}
#b { left: 120px; }
</style>
<script type="text/javascript">
(function() {
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');
window.onload = function() {
var a = document.getElementById('a');
a.attachEvent('onclick', function(e) {
console.log('A');
e.returnValue = false;
return false;
});
var b = document.getElementById('b');
b.attachEvent('onclick', function(e) {
console.log('B');
e.returnValue = false;
return false;
});
};
})();
</script>
</head>
<body>
<a id="a" href="/foo"></a>
<v:rect id="b" href="/bar"><v:fill color="#0000ff" /></v:rect>
</body>
</html>
Run this sample in IE8. Clicking on the link (the red shape) properly prevents browser from going to /foo with returnValue = false/return false.
However, attempting to cancel the navigation on the <v:rect> does not work. The browser navigates to /bar!
Is there a solution to get around this?
This should work:
var b = document.getElementById('b');
b.attachEvent('onclick', function(e) {
e.preventDefault();
});
Related
I try to prevent contextual menu to be displayed on right click with Paperjs. I tried to catch the right click event with the following JS code:
window.addEventListener("contextmenu", function(event){
//document.body.addEventListener("contextmenu", function(event){
console.log ('Right click');
//event.stopImmediatePropagation();
event.stopPropagation();
return false;
//return true;
});
I tried many combinations (commented lines). None is working. I can't figure out why it is not working, while the following line does the job:
<body oncontextmenu="return false;">
I can't add attribute to <body> so I would like to do in from the JavaScript.
Here is a JSFiddle: https://jsfiddle.net/Imabot/zujxaL95/5/
You're looking for event.preventDefault()
window.addEventListener("contextmenu", function(event){
//document.body.addEventListener("contextmenu", function(event){
console.log ('Right click');
//event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false;
//return true;
});
//var canvas = document.getElementById("canvas");
paper.install(window);
paper.setup(canvas);
var c1 = new Path.Circle(new Point(200, 140), 100);
c1.fillColor = 'red';
c1.visible = true;
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
canvas[resize] {
background: #ccc;
cursor: pointer;
width: 100%;
height: 100%;
margin:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>
<canvas id="canvas" resize></canvas>
event.stopPropagation() Does not work as it should be in the Firefox browser, but in Google Chrome or Internet Explorer or opera it is works well, the problem in Firefox browser when Clicking on btn_1 should show message btn_1 not show div1 .Is there another function or a solution to this problem? Gratefully
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Hello!</title>
<style type="text/css">
<!-- body {
text-align: center;
}
#main {
position: absolute;
height: 400px;
width: 600px;
border: 1px solid black;
left: 400px;
}
#btn1 {
position: absolute;
height: 30px;
width: 200px;
border: 1px solid black;
left: 500px;
top: 420px;
}
#btn2 {
position: absolute;
height: 30px;
width: 200px;
border: 1px solid black;
left: 800px;
top: 420px;
}
#div1 {
height: 100px;
width: 100%;
background-color: #FF3399;
}
#div2 {
height: 100px;
width: 100%;
background-color: #99FF00;
position:relative;
}
#div3 {
height: 100px;
width: 100%;
background-color: #00CC99;
}
-->
</style>
<script>
function addElement2() {
var element = document.getElementById("main");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
var newContent = 0;
for (var i = 0; i <= 2; i++) {
newContent = newContent + 1;
var divname = "div" + newContent;
var divname2 = "div" + newContent;
var Content_text = "newContent" + newContent;
divname = document.createElement("div");
document.getElementById("main").appendChild(divname);
Content_text = document.createTextNode(divname2);
divname.id = divname2.toString().trim();
divname.appendChild(Content_text);
var btn = document.createElement("BUTTON")
document.getElementById(divname2.toString().trim()).appendChild(btn);
var btn_id= "btn_" + newContent;
btn.id =btn_id;
var Content_text2 = document.createTextNode("btn_" + newContent);
btn.appendChild(Content_text2);
btn.onclick = function(){delete_cooke1(this) ;} ;
divname.onclick = function(){go_to(this) ;} ;
}
}
function delete_cooke1(mmm){
event.stopPropagation();
var str = mmm.id.toString() ;
alert(str);
return;
}
function go_to(mmm){
var str = mmm.id.toString() ;
alert(str);
return;
}
</script>
</head>
<body>
<div id="main"></div>
<button id="btn1" onclick="addElement2()">1-Create 3 divs</button>
</body>
</html>
You will need to explicitly pass the event object into your callback function. For example:
document.querySelector("body").onclick = function(e){
console.log(e); // the current event
};
You are taking advantage of the fact that Chrome exposes the current event as a global on the window (i.e. window.event or just event). Firefox does not do this -- and other browsers are affected as well.
Calling event.preventDefault() worked in my case.
I have a react app and I was calling event.stopPropagation() inside the onclick handler of a material-ui checkbox like so:
<StyledCheckBox
icon={<CircleUnchecked />}
checkedIcon={<CircleChecked />}
checked={shipmentEditIds.includes(id)}
onClick={event => {
event.stopPropagation();
setShipmentEditIds({ id });
}}
/>
For some reason, only in firefox browser, this wasn't stopping the event from propagating.
Once I added event.preventDefault() to the onClick handler it fixed the problem.
I know this doesn't provide an answer as to why stopPropagation() isn't working in Firebox browser but just sharing what worked for me.
Pass event from onclick:
btn.onclick = function(){delete_cooke1(this, event) ;} ;
And use event argument with stopPropagation()
function delete_cooke1(mmm, e){
e.stopPropagation();
e.preventDefault(); // Add this line also
var str = mmm.id.toString() ;
alert(str);
return;
}
[ Learning Purpose ]
I'm Trying to use only javascript for this..
any advices with the simplest way is very appreciate it..
I Have explained what I need to do in the button functions with comments..
P.S: I'm not sure if this is done using CSS.. so please guide me if it does.
Seems Like I'm being misunderstood I'm look for this effect:
http://lokeshdhakar.com/projects/lightbox2/
<!DOCTYPE html>
<html>
<head>
<style>#mydiv{height: 250px; width: 250px; background-color:#34f;}</style>
<script>
document.onreadystatechange = function()
{
if(document.readyState == "complete")
{
var div = document.getElementById("mydiv");
var mybutton = document.getElementById("mybutton");
mybutton.onclick = function()
{
// center div
// gray out the rest
};
document.onclick = function()
{
// remove gray out effect to the page
};
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="mybutton"></button>
</body>
</html>
HTML:
<div id="mydiv" style="display:none"></div>
CSS:
#mydiv
{
background-color: white;
filter:alpha(opacity=50); /* IE */
opacity: 0.5; /* Safari, Opera */
-moz-opacity:0.50; /* FireFox */
top: 0px;
left: 0px;
z-index: 20;
height: 100%;
width: 100%;
background-repeat:no-repeat;
background-position:center;
position:absolute;
}
JavaScript:
mybutton.onclick = function()
{
document.getElementById("mydiv").style.display = "";
};
document.onclick = function()
{
document.getElementById("mydiv").style.display = "none";
};
may be helps you.
I am trying to achive a fixed position after a certain point of the page is passed using CSS JS and HTML.
Also I don't know the bet aproach in loading the function into the html doc, I was thinking on using the onload...
Here is what I have done until now:
<!DOCTYPE html>
<html>
<head>
<script>
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script language="JavaScript">
<style>
#main {
position: relative;
width: 620px;
margin: 0 auto;
height: 1800px;
}
#left1{
position: absolute;
font-family: sans-serif;
left: 0px;
top: 10px;
height: 200px;
width: 300px;
background-color: #F6D565;
}
#right1{
position:absolute;
font-family: sans-serif;
top: 10px;
right: 0px;
height: 300px;
width: 300px;
background-color: #DFFCC2;
}
#right2{
position:absolute;
top: 320px;
right: 0px;
font-family: sans-serif;
height:300px;
width: 300px;
background-color: #DFFCC2;
}
#right3{
position:absolute;
top: 630px;
right: 0px;
font-family: sans-serif;
height: 300px;
width: 300px;
background-color: #DFFCC2;
}
</style>
</head>
<body >
<div id="main">
<div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="right1">bbb</div>
<div id="right2">cccccccccccccccccccccc</div>
<div id="right3">ddd</div>
</div>
</body>
</html>
DEMO
The DOM is not available when you are trying to access div with id left1.
So your first line var left1 = document.getElementById("left1"); will give error.
Instead Wrap your current code within window.onload
<script>
window.onload = function() {
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
console.log("calling scroll")
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
}
</script>
Else place your javascript just above the </body> tag
Yes, you can use onload to call a function after the page is loaded like so:
<script type="text/javascript">
function onLoad(){
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
}
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script>
and replace
<body>
with:
<body onload="onload()">
Note that you can still leave the script in the header of your page (between <head> and </head>).
You can use window.addEventListener() if you don't like <body onload="onload">, but IE won't support this. See "Hook a javascript event to page load" for details.
You have to load your script after the DOM is created. The time you are trying to parse var left1 =document.getElementById("left1"); DOM hasn't created yet so var left1 is null
TRY:
<!DOCTYPE html>
<html>
<head>
<style>
//YOUR CSS
</style>
</head>
<body >
<div id="main">
<div id="left1">aaaaaaaaaaaaaaaaaaaa</div>
<div id="right1">bbb</div>
<div id="right2">cccccccccccccccccccccc</div>
<div id="right3">ddd</div>
</div>
<script>
var left1 = document.getElementById("left1");
var origOffsetY = left1.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? left1.style.position = "fixed":
left1.style.position="absolute";
}
document.addEventListener('scroll', onScroll);
</script language="JavaScript">
</body>
</html>
EDIT:
By changing position you have to rearrange your item.
Try:
function onScroll(e) {
if (window.scrollY >= origOffsetY) {
left1.style.position = "fixed";
left1.style.left = "66px"
} else {
left1.style.position = "absolute";
left1.style.left = "0px";
}
}
DEMO
I am working with hiding and showing divs in javascript, basically I want to show one div, then when a button is clicked hide that div and show another. I can't quite figure the javascript out here's what I have at the moment but the second layer isnt showing when I click hide.
<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('layer').style.visibility = 'hidden';
document.getElementById('topbar').style.visibility = 'visisble';
}
else {
if (document.layers) { // Netscape 4
document.layer.visibility = 'hidden';
document.topbar.visibility = 'visible';
}
else { // IE 4
document.all.layer.style.visibility = 'hidden';
document.all.topbar.style.visibility = 'visible';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('layer').style.visibility = 'visible';
document.getElementById('topbar').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.layer.visibility = 'visible';
document.topbar.visibility = 'hidden';
}
else { // IE 4
document.all.layer.style.visibility = 'visible';
document.all.topbar.style.visibility = 'hidden';
}
}
}
</script>
and css:
#topbar {
background-image: url(images/back.png);
background-repeat: repeat;
height: 30px;
margin-top: 20px;
visibility: hidden;
}
#show {
float: right;
padding-right: 40px;
padding-top: 10px;
}
#hide {
float: right;
padding-right: 40px;
}
#layer {
background-image: url(images/back.png);
background-repeat: repeat;
padding-left: 20px;
padding-bottom:20px;
overflow: auto;
}
using standard html links like:
Hide
Any help would be appreciated, cheers!
EDIT
okay switched to something completely new but it seems to not show after hiding
<script type="text/javascript">
$(function(){
$('#showhide').click(function(){
$('#layer').toggle();
$('#topbar').toggle();
});
});
and
Show/Hide
and
<div id="layer"></div>
You dont need jQuery for this.
Your functions could look like this:
function hideElement(elementId)
{
document.getElementById(elementId).style.display = 'none';
}
function showElement(elementId)
{
document.getElementById(elementId).style.display = 'block';
}
Then on page load, or in the css you can hide the first div. When the click happens you can then use showElement to show it.
This will probably help you: http://api.jquery.com/hide/ or the http://api.jquery.com/toggle/.
EDIT:
I am hoping that following example will help you.
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#a").toggle();
$("#b").toggle();
});
});
</script>
</head>
<body>
<div id="a">
I am a.
</div>
<div id="b" style="display: none">
I am b.
</div>
<div id="button">
<button>Show/Hide</button>
</div>
</body>
</html>