Is there anyway to remove an annoyance clickable Ads body link?
Example:
$('#test').ready(function(){
$( 'body' ).click( function ( e ) {
if ( this === e.target ) {
window.location = 'http://www.google.com/';
}
});
});
body { background: #f00; margin: 0px; padding: 0px; width:100%; height:1000px; cursor: pointer; }
<html>
<head>
<title>
test
</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
</head>
<body>
</body>
</html>
Thank you.
You can remove all event listeners form an element by assigning its outerHTML to itself.
var body = document.body;
body.outerHTML = body.outerHTML;
But there is not way to remove one anonymous listener alone.
Related
I'm curious why this simple code does not run indefinitely. After reading Eloquent JavaScript, it says that the immediate nodes will execute first, and then the outer nodes will, in turn, execute their click event listeners. However, the code below only gives these 7 lines as output. It seems as if lines 5 and 6 would fire the click listener on the container again. Perhaps I am not understanding something about propagation. I've tried debugging using Visual Studio and it does not enter the function, but I cannot find a way to determine why this is using the debugger. Thanks for the help.
"body clicked"
"container clicked"
"item clicked"
"container clicked"
"body clicked"
"body clicked"
const container = document.getElementById("container");
const item = document.getElementById("item");
const body = document.getElementById("body");
item.addEventListener("click", function () {
console.log("item clicked");
});
container.addEventListener("click", function () {
console.log("container clicked");
item.click();
});
body.addEventListener("click", function () {
console.log("body clicked");
container.click();
});
body {
background: yellow;
}
div.container {
width: 200px;
height: 200px;
background: aqua;
border: 1px solid black;
}
div.item {
width: 100px;
height: 100px;
background: gray;
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My website</title>
<link rel="stylesheet" href="site.css">
</head>
<body id="body">body
<div class="container" id="container">container
<div class="item" id="item">item</div>
</div>
<script src="site.js"></script>
</body>
</html>
As #pilchard pointed out in the comments, calling the click() method of an element will only invoke that element's click event handling function (no different than directly calling the function by its name), but it won't trigger an actual click event.
Below, I've commented out those calls and you are left with being able to clearly see that a mouse click does trigger the event and how that event will bubble up through the clicked element's ancestor elements.
const container = document.getElementById("container");
const item = document.getElementById("item");
const body = document.getElementById("body");
item.addEventListener("click", function () {
console.log("item clicked");
});
container.addEventListener("click", function () {
console.log("container clicked");
//item.click();
});
body.addEventListener("click", function () {
console.log("body clicked");
//container.click();
});
body {
background: yellow;
}
div.container {
width: 200px;
height: 200px;
background: aqua;
border: 1px solid black;
}
div.item {
width: 100px;
height: 100px;
background: gray;
border: 1px solid red;
}
<body id="body">body
<div class="container" id="container">container
<div class="item" id="item">item</div>
</div>
</body>
I cannot manage to reproduce the problem in fiddle.
The problem occurs when is exactly 1286px wide (in the inspector), but it might also happen at other widths.
Clicking the elements changes the height of the body, from 86 to 85.9833.
https://i.imgur.com/rGJPFyW.png
https://gfycat.com/acidicmarvelousabyssiniancat
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {font-family: monospace; background: #222; color:#aaa;}
html{scrollbar-color: grey black;}
#ui_tags{
column-width: 80px;
margin: 1em;
padding: 1em;
background-color: #181818;
/*width: 90%;*/
}
.tag_select {
cursor:pointer;
color:#aaa;
}
.tag_select:hover {
background: #222;
}
.tag_select:active {
background: #f00;
}
p {margin-bottom:1px;margin-top:1px;}
</style>
<body>
<div id="ui">
<div id="ui_tags"><p class="tag_select">4ch:114</p><p class="tag_select">avtr:54</p><p class="tag_select">awe:53</p><p class="tag_select">btfl:211</p><p class="tag_select">cat:319</p><p class="tag_select">charc:19</p><p class="tag_select">cmc:145</p><p class="tag_select">dung:15</p><p class="tag_select">frnc:53</p><p class="tag_select">fun:5</p><p class="tag_select">inspr:192</p><p class="tag_select">lego:16</p><p class="tag_select">lndsc:63</p><p class="tag_select">mchn:5</p><p class="tag_select">meh:42</p><p class="tag_select">mnstr:87</p><p class="tag_select">pgrmh:62</p><p class="tag_select">pltc:239</p><p class="tag_select">ppl:22</p><p class="tag_select">pxlr:72</p><p class="tag_select">shrlt:79</p><p class="tag_select">txl:145</p><p class="tag_select">urbn:6</p><p class="tag_select">vlgr:135</p><p class="tag_select">wrd:23</p>
</div>
</div>
<div id="gallery">
</div>
<script type="text/javascript">
window.onload = function(){
var tag_selects = document.getElementsByClassName("tag_select");
for(var i = 0, size = tag_selects.length; i < size ; i++){
// var elem = tag_selects[i].children[1];
var elem = tag_selects[i];
elem.addEventListener("click", function(event){
char = this.innerHTML;
document.getElementById('gallery').innerHTML = char;
});
}
}
</script>
</body>
</html>
I don't know if I'm using bad practices, or how to avoid this problem. I think column-width is not really stable and should be avoided but I'm not sure.
I modified the <p> to <span> and the problem went away.
When I open the site I want the iframe to immediately run code that I have already put in (<p>hello</p>).
But the code doesn't get executed, I have to put a space or do something before it runs.
If you can't get that to work, a run button will also work.
function compile() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function() {
code.open();
code.writeln(
html.value
);
code.close();
};
}
compile();
#html {
width: 95em;
}
textarea {
width: 32%;
float: top;
min-height: 250px;
overflow: scroll;
margin: auto;
display: inline-block;
background: #f4f4f9;
outline: none;
font-family: Courier, sans-serif;
font-size: 14px;
}
iframe {
bottom: 0;
position: relative;
width: 100%;
height: 35em;
}
<html>
<head>
<title>Code Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<textarea id="html"><p>hello</p></textarea>
<iframe id="code"></iframe>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
The code that writes to the iframe is within an onkeyup event. Nothing will be written until a key is pressed and released. To solve your problem, simply write to the iframe outside of the onkeyup event when the compile function is called as in the example below.
function compile() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
code.open();
code.writeln(html.value);
code.close();
document.body.onkeyup = function() {
code.open();
code.writeln(html.value);
code.close();
};
}
compile();
You have to change your function to make it say .onload instead of .onkeyup like this:
function compile() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
document.body.onload = function() {
code.open();
code.writeln(
html.value
);
code.close();
};
}
compile();
You could also add a second function with a different name that does the same thing as the original function so that it still changes when you change the code:
function change() {
var html = document.getElementById("html");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function() {
code.open();
code.writeln(
html.value
);
code.close();
};
}
change();
Why clicking on parent div element does the job, but clicking on the child div text Click Me! returns undefined and the page doesn't load in iframe? I used event.stopPropagation to stop bubbling but it is still the same. What is the correct way to do that, when addEvenLisneter is preferred over inline onclick ?
var panel = document.getElementsByClassName('panel');
var iframe = document.getElementById('frame');
[].forEach.call(panel, function(each) {
each.addEventListener('click', linkClick);
});
function linkClick ( event ) {
event.stopPropagation();
event.preventDefault();
iframe.src = event.target.dataset.url;
}
.panel {
padding: 20px;
margin: 10px;
border: 1px solid yellow;
}
.panel div {
display: inline;
}
<div class="panel" data-url="https://www.w3schools.com/jsref/event_preventdefault.asp">
<div>Click Me!</div>
</div>
<iframe id="frame"></iframe>
When I console.log(event) bubble property is still set to true.
If you prevented the click event from bubbling from the inner div, then it would never reach the one to which you bound the event handler and your function would not fire at all.
The problem here is that event.target matches the element that was actually clicked on. You want event.currentTarget if you want to get the element that the event handler was bound to.
var panel = document.getElementsByClassName('panel');
var iframe = document.getElementById('frame');
[].forEach.call(panel, function(each) {
each.addEventListener('click', linkClick);
});
function linkClick ( event ) {
event.stopPropagation();
event.preventDefault();
iframe.src = event.currentTarget.dataset.url;
}
.panel {
padding: 20px;
margin: 10px;
border: 1px solid yellow;
}
.panel div {
display: inline;
}
<div class="panel" data-url="https://www.w3schools.com/jsref/event_preventdefault.asp">
<div>Click Me!</div>
</div>
<iframe id="frame"></iframe>
Well, I am not actually solving the problem as a such, more like a workaround.
Maybe you could try using a button instead, as this is slightly more valid HTML.
I modified the CSS a bit, so it matches your example.
<!DOCTYPE html>
<html>
<style>
.panel {
padding: 20px;
margin: 10px;
border: 1px solid yellow;
display:block;
width:100%;
text-align:left
}
</style>
<body>
<button class="panel" data-url="https://www.w3schools.com/jsref/event_preventdefault.asp" type="button">Click Me!</button>
<iframe id="frame"></iframe>
</body>
<script>
var panel = document.getElementsByClassName('panel');
var iframe = document.getElementById('frame');
[].forEach.call(panel, function(each) {
each.addEventListener('click', linkClick);
});
function linkClick ( event ) {
event.stopPropagation();
event.preventDefault();
iframe.src = event.target.dataset.url;
}
</script>
</html>
In the below code,
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.background-color = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.background-color="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike">Like</button>
</body>
</html>
error is thrown at line document.body.lastElementChild.style.background-color = "#FF9966";. Error is Invalid left-hand side in assignment.
How do I resolve this error?
Note: yet to learn JQuery
First of all you need to use element.style.backgroundColor instead of element.style.background-color.
Here is a list of the JS equivalent of CSS attributes.
Your second problem is that your script executed before the <button> is loaded, thus making the script the current lastElementChildof body.
You can solve this by wrapping your script in window.onload:
(Also, selecting your button with document.body.lastElementChild is bound to give you errors since you most likely at some point will add something after the button)
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button {
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color: white;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var likeButton = document.getElementById("like-button");
likeButton.onclick = changeColor;
function changeColor() {
if (likeButton.innerHTML == "Like") {
likeButton.style.backgroundColor = "#FF9966";
likeButton.innerHTML = "Unlike";
} else {
likeButton.style.backgroundColor = "#00FFFF";
likeButton.innerHTML = "Like";
}
}
}
</script>
<button type="button" name="LikeUnlike" id="like-button">Like</button>
</body>
</html>
background-color is not a valid JavaScript identifier. For setting it with DOM style object, it should be backgroundColor in camel case.
More info on DOM style object at http://www.w3schools.com/jsref/dom_obj_style.asp
Check out my demo
JS
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
I think you should use document.body.lastElementChild.style["background-color"] to set color for element
not background-color but backgroundColor . Try this and see if works
document.body.lastElementChild.style.backgroundColor = "#FF9966";
the total code:
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor = "#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor ="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
You use this code. It is working fine.
<!DOCTYPE html>
<html>
<head>
<title>Button events</title>
<meta charset="UTF-8">
<style type="text/css">
button{
background-color: #00FFFF;
border: 2px solid orange;
border-radius: 10px;
width: 60px;
height: 30px;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
document.body.lastElementChild.onclick = changeColor;
function changeColor(){
if(document.body.lastElementChild.innerHTML == "Like"){
document.body.lastElementChild.style.backgroundColor =
"#FF9966";
document.body.lastElementChild.innerHTML = "Unlike";
}else{
document.body.lastElementChild.style.backgroundColor="#00FFFF";
document.body.lastElementChild.innerHTML = "Like";
}
}
</script>
<button type="button" name="LikeUnlike" onclick="changeColor
()">Like</button>
</body>
</html>
You can use Jquery for assign or remove a css class, to add color to your button, with this code:
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
the toggleClass function is to add and remove a css class,
"othercolor" is your class css with the styles to your button.
Include jquery with this script before </body> and before the code above:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('button').on('click', function() {
$(this).toggleClass('other-color');
});
});
</script>
I hope it helps you.