How to I stop right mouse click on my website - html

i would like to disable a user from right mouse clicking on an embedded youtube video.
How to I do this ?

1st Way:
We can set the oncontextmenu="return false" in the tags of the HTML page where you have embedded youtube video
so HTML part will probably look like
<{tagname} oncontextmenu="return false">
...
</{tagname}>
2nd Way:
In this way we add a JavaScript method, in this we check if click is right click or left click if it is right click then a message is displayed like "Right click disabled".
Set an id where you have added code for embedded youtube video. Add this Script in the HTML Document for that id.
<script language="javascript">
document.getElementByID({idname}).onmousedown=disableclick;
status="Right Click Disabled";
Function disableclick(e)
{
if(event.button==2)
{
alert(status);
return false;
}
}
</script>
Note: In this solution if you click the right click it displays the message:
“Right click disabled”
If we want to remove the message box then this solution do not work.
*Replace {...} with appropriate names.
Reference: Click here

Related

html Button on top of link

Hey I have a div which is wrapped by a Link component, and inside that div I have more buttons, but the problem is, when I click on the inner smaller buttons, I actually click on the Link component as well, so I get redirected which is not what I want... How do I fix this?
it seems as though both the link and the button get clicked but if i am intending to click the button only i want to avoid the parent link.
What I mean is, the Link is used to navigate to some URL when you click on it. Putting elements inside that for other tasks. like a blog post, you click on the parent it will redirect you, but on the child the button will allow you to delete it
was coding this in nodejs react so i was using onClick events
example
<Link to="/blog-post">
<div className="link-post-container">
...blog
<button className='deleteButton'></button>
</div>
</Link>
I have tried event.stopPropagation on the button but it still doesn't seem to do anything. Is it because the Link is an href instead of a onClick?
SOLUTION
so using some of the possible solutions below i started messing around and noticed by in the onClick of the deleteButton, if i add the following in, it works:
event.preventDefault()
with this, the redirect because of the href does not occur anymore and only the button click event will take place
const handleClick = event => {
event.stopPropagation()
// then write rest of your onclick code
}
<button className='deleteButton' onClick={handleClick}></button>
The click event propagates from the button upwards in the DOM tree until it reaches the root (simplified explanation - you can learn more about event propagation here). This is why the link also registers it and runs its onclick handler, redirecting you to another site.
You can call event.stopPropagation() inside your button's onClick handler to stop the event from reaching the encapsulating link.
source

Repeated clicks on iframe don't register as clicks

I'm using the following code in order to check when the user clicks a (cross-domain) iframe:
var myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});
I'm using this to check if a user clicked a Google Ad, and it works fine the first time you click it. However the second click on the banner doesn't get registered (unless you refresh the page again).
What I've noticed, though, is that if I click anywhere OUTSIDE the iframe after the first click, and then I click the banner again, the click gets registered.
What I tried to do was use 'window.focus();' on mouseover, but it doesn't fix it.
Can you help me?

Generate Href target blank link from popup form

I want users to input some url in a text field from a popup, and then, when submit the popup the parent page auto refresh and shows the url they have insert, with hyperlink to the site.
I have now set a scrypt to store the form in a cookie, that computer can read everytime users come back to the site.
You can see my work in: http://www.resmasecamadas.com/test
You can achieve it using JS. you dont need to use cookies at all!
Observe this sample code.
//On click of this button new Popup will be opened!
<button onclick="myFunction();">Open popup</button>
<script>
function myFunction() {
var popup = window.open("", "popup", "width=200, height=100");
popup.document.write("<input type='text' name='text' id='text'><button onclick='window.opener.passFunction(text.value);'>click</button>");
}
function passFunction(x){
document.write(x);
}
</script>
You can send data from pop up window using window.opener.someFunction(parameters)here "someFunction" is a function in parent window!

href = "#report-item" but not shown on url - how it works

I want to know how in this web site, when I hover the mouse over report ad of the page, it show the link as ....com/***/***#report-item, but when I click on it, it shows me a pop-up. but still the original URL is not changing to ....com/***/***#report-item?
I checked the source of the page, and it shows the link code as:
<span><i class='ico-report'></i>Report Ad</span>.
That is because they prevent the browser from doing what it is meant to do (default event).
Here is the JavaScript code for that:
event.preventDefault();
You can include that inside the element, something like
Link
And inside the function, add that code. It would prevent the default function; that is to change the URL.
Maybe they're using jQuery for that because I can't see any sort of onclick="" inside the element. So what they might be doing would be this:
Generate Report
and the jQuery code would be as:
$('a.report').click(function () {
event.preventDefault(); // prevent the default function of the hyperlink
/* show the pop up */
});
This way, the website is preventing the default function and is using that link to do some other function.
Here is a fiddle for that: http://jsfiddle.net/afzaal_ahmad_zeeshan/3zPd6/
To get the Elements Attribute
To get the element's attribute in JavaScript you use the following code
document.getElementById("hyperlinkId").href;
This would get you the href of the hyperlink. And you can reference it in your call.

Remove Anchor URL Label

I wonder if someone can guide me on how to remove the url label that appears at the bottom of the page when you hover over an anchor (I wonder if it's even posible). I've googled a lot and didn't find any answers.
Suppose I have
<a href="www.somepage.com" title="The Page">Link< /a>
in the bottom of the page there will appear a tooltip/label showing "www.somepage.com".
Please see here for an example
Thanks in advance!
You can use either Javascript or JQuery.
For example, you can set to A attribute "href=#" and add an attribute url=www.somepage.com something like this:
Link
If you click over this nothing happen.
Now, you need to apply with javascript or JQuery click event. The next example is using JQuery and Javascript:
At the bottom of page's body:
<script>
$('#link').click(function() {
var url = $(this).attr('url');
window.location.href=url;
});
</script>