I have a javascript that prevents right click on an HTML page:
document.addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);
I have a <input> tag on that same page with the name "Link" that I want the right click to happen on.
How can I achieve that?
You can check and test e.target of the event:
document.addEventListener("contextmenu", function(e){
if (e.target.tagName.toLowerCase() === 'input' && e.target.name === 'Link') {
return; //pass
}
e.preventDefault(); // prevent others
}, false);
Put an if statement inside your event listener:
document.addEventListener("contextmenu", function(e){
if (e.target.name !== "Link") {
e.preventDefault();
}
}, false);
So it basically says: when the target element does not have a name of Link prevent the right click.
<div>
This is the Phone and NO ONE SHOULD RIGHT CLICK THIS! >:) </br>
<img oncontextmenu="return false;" class="tlClogo" src="http://i.imgur.com/0atiS5C.jpg" style="height: 120px; width:120px;">
</div>
</br></br></br></br>
And this is the Keyboard, ofcourse yo can right click this :)</br>
<img src="http://i.imgur.com/xkrKz1X.jpg" style="height: 120px; width:120px;">
Working Fiddle Example
Related
I am making a text editor with <div contenteditable>. I want to prompt a confirmation message before the user deleting image element inside the editor. So when the user press backspace, before deleting the image element, there should be a prompt "Are you sure you want to delete the image?".
How can I do this?
Event listener keydown can be added to that <div contenteditable> element. Keydown and keypress events takes place before the content is changed and event.preventDefault() can be used to stop the content before editing.
window.onload = function(){
document.getElementById("elem").addEventListener('keydown',function(event){
if( event.key=='Backspace' ){
//your condition check can be given here
if( confirm('are you sure you want to delete') ){
return;
}else{
event.preventDefault();
}
}
});
}
.edit-elem{
background-color: red;
}
<div contenteditable="true" class="edit-elem" id="elem"></div>
Is this what you want?
$(document).ready(function(){
$('.remove').click(function(e){
e.preventDefault();
alert('Are You Sure?');
});
$(document).on('keyup','div', function(e){
console.log(e.keyCode);
if(e.keyCode == '8'){
alert('You have pressed backspace');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>
<input type="file" class="image" name="image"/>
<button type="button" class="remove">Remove</button>
</div>
EDIT: The original error was a typo. I will rewrite it so it stays useful to the community.
How to disable all links with a certain class (e.g. ".disabled") from linking without adding a handler to each element?
The advantages of this approach is that it would work with every link (or element) with this class no matter if they were added dinamically or changed their classes during the life cycle of the webpage.
It is acceptable (for this use case) if the solution stops the "click" event from bubbling.
It is not acceptable (for this use case) to remove the href attribute, it might be "not disabled" later.
DEMO with the debugging and listing all delegated events.
You can use jQuery's .on() method on the container, and you wont have the bulk of hundreds of click events.
HTML:-
<div id="container"> // #container has the event handler assigned
<a>content</a>
Disabled
Not disabled
<a>content</a>
</div>
jQuery
// Whenever <a> elements that descend from #container get
// clicked the click event handler will fire.
$('#container').on( 'click','.disabled', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
You will have to attach an event to each element (this will do it):
$(".disabled").click(function(e){
e.stopPropagation();
e.preventDefault();
});
Apply following class to all a elements:
.not-active{
pointer-events: none;
cursor: not-allowed;
}
$('a').addClass('not-active');
<div class="body">
Enabled
Disabled
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(".body").on('click','a',function(e){
if ($(this).is('.disabled')) {
e.preventDefault();
e.stopPropagation();
alert("Click disabled");
}
});
</script>
This works for me.
You can disable for redirect on linked url by this code
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
google
<br />
Facebook
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
jQuery('body').click(function () {return false;});
</script>
</html>
<div id="container"> // #container has the event handler assigned
<a>content</a>
Disabled
Not disabled
<a>content</a>
</div>
$(document).ready(function(){
$('#container').on( 'click','.disabled', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
});
Simply replace the href links with void reference:
$('.disabled').each(function(i) {
if ($(this).attr('href')) $(this).attr('href', 'javascript:void(0);');
});
As a followup measure, in case you still need the actual links, you could save them to the object's data, then change them!
$('.disabled').each(function(i) {
var href = $(this).attr('href');
if (href) {
$(this).data('href', href)
.attr('href', 'javascript:void(0);');
}
});
Example
$('.disabled').each(function(i) {
var href = $(this).attr('href');
if (href) {
$(this).data('href', href)
.attr('href', 'javascript:void(0);');
}
});
setTimeout(function() {
$('.disabled').each(function(i) {
var href = $(this).attr('href');
if (href) {
var href = $(this).data('href');
console.log(href)
$(this).after($('<i />', { html: ' - My old Link was: <b>' + href + '<b />' }).fadeIn());
}
});
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
bob<br />
<p class="disabled">ron</p><br />
jane<br />
<h3 class="disabled">sally</h3><br />
trump<br />
<a href="javascript: void(0);" onclick="callFunction()"><img src="imagePath" border="0" alt="" title="" />
If i click the anchor tag it will call the function callFunction().
After clicking the anchor tag, if i press the enWter key, again the function is called.
How to prevent Enter for onclick in anchor tag?
In your JS - you can call blur() which will 'un-focus' the link since it was clicked - Within callFunction():
$(anchorDomEl).blur()
After clicking a link, it becomes focused.
You can remove the focus by using jQuery blur() function:
var x = 0;
$("#link1").click(function() {
$("#result").text(++x);
});
$("#link2").click(function() {
$("#result").text(++x);
$(this).blur();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" href="#anchor">Message on enter after click</a>
<br/>
<a id="link2" href="#anchor">No message on enter after click</a>
<div id="result"></div>
Using CSS:
:focus { outline: 0; } // or #targetID:focus { outline: 0; }
Using jQuery:
$('a').click(function () {
this.blur(); // or $(this).blur();
});
function callFunction(e)
{
if(e.keyCode==13)
return false;
// 13 is the keycode for enter key , dont mind if the code is a bit wrong , but u got what i mean
// your rest of the code
}
<a href='javascript:vois(0)' onclick='callFunction(event)'>your button</a>
explanation: you can pass an event handler in the function "callFunction" and that event will trigger on every key pressed , so if the enter key is pressed , it triggers the functiona dn the keycode of enter key is 13 enter key , so when you press enter key , it will detect and return false , and the function will not execute further
I am making a personal website. I want to make it so that cliking the background changes the theme from dark to light and vice/versa. It works, but I dont want it to switch the theme if the user clicks on text, only the background of the webpage For example, if I click the text at the bottom it changes the css, but it should only do that if you click the white background.
Here is my code (Mainly checkout js/main.js, the switchTheme function and the index.html) and the website itself.
You are targeting your container class. Anytime that div (or anything in it) gets clicked, that event will fire. Try stopping the event propagation on your click event if $('this').selector === 'p' or whatever class you're using.
Also - not bad for 13 boss!
$( document ).click(function( event ) {
// if statement here
event.stopPropagation();
// else the regular behavior
});
Thanks everyone for your help! I'd almost given up and wanted to use a button to toggle it instead. The more you know!
And since this is an answer to my question: e.stopPropogation()
You can also do something like this:
document.querySelector('div').addEventListener('click', (e) => console.log("Heeeeyyy! Hoooo!"))
<div style="position: fixed; background-color: lightcoral; width: 500px; height: 180px;">
</div>
<div style="position: fixed; background-color: lightblue; width: 300px; height: 100px;">
<p>You can not click through me!</p>
</div>
Don't put the elements inside the "parent".
Move them together only by style.
How about
$("#container").on("click", "div", function(event){
event.stopPropagation();
switchTheme();
});
Add a test to see if the ID of the clicked element was actually the container.
function switchTheme( event ) {
if ( event.target.id === 'container' ) { //the container was clicked, and not a text node
if (dark) {
$("#container").css("background-color", "rgba(255,255,255,0.7);");
$("#container").css("color", "black");
dark = false;
} else {
$("#container").css("background-color", "rgba(0,0,0,0.7);");
$("#container").css("color", "white");
dark = true;
}
}
}
Try setting the following:
$("#container").on("click", "div", function(e){
e.stopPropagation();
});
EDIT--- I realized that the problem here was that the click handler that was bound to the element had to be unbound before I could bind another click handler handler.
I want to allow the user to select/unselect items by click on the element in question. The elements start in an "options" box and if clicked, move to a "selected box". If they are then clicked in the selected box, the elements move back to the original options box.
Can't figure out why delegate() and live() are not working here. I assume this has to do with prependTo() or appendTo().
$('#amen_options .options p').click(function(e){
$(this).appendTo('#amen_selected .options');
e.stopPropagation();
e.preventDefault();
});
/*
$("body").delegate('#amen_selected p', 'click', function(e){
#(this).appendTo('#amen_options .options');
e.stopPropagation();
e.preventDefault();
});
*/
$('div#amen_selected div.options p').live('click',function(e){
$(this).appendTo('#amen_options .options');
e.stopPropagation();
e.preventDefault();
});
Here's the markup:
<div>
<div id="amen_options">
<h3>Click to Select</h3>
<div class="options">
<p data-option="">One</p>
<p data-option="">Two</p>
<p data-option="">Etc...</p>
</div>
</div>
<div id="amen_selected">
<h3>Selected</h3>
<div class="options">
</div>
</div>
The first click works (sending p elements from options to selected box). Once in selected, though, no event handlers are binding. The firebug console isn't showing an error. Normally, I'd assume that this is a markup problem, but I've checked it repeatedly.
Thanks!
It looks like delegate() works good.
http://jsfiddle.net/fLXgU/1/
$('body').delegate('#amen_options .options p', 'click', function(e) {
$(this).appendTo('#amen_selected .options');
return false;
});
$('body').delegate('#amen_selected .options p', 'click', function(e) {
$(this).appendTo('#amen_options .options');
return false;
});