I have HTML code as follows:
Text
When user clicks by "Left mouse button" on the link, then reloadPage() should be called.
But when user clicks using "Ctrl + click" or "middle button" on the link then I want to open a new window without reloadPage().
How can I do that?
You can refference here. Its my code
Click Me
<script>
$(document).ready(function() {
$(document).keydown(function(event){
if(event.which==17)
cntrlIsPressed = true;
});
$(document).keyup(function(){
cntrlIsPressed = false;
});
});
var cntrlIsPressed = false;
function reloadPage(mouseButton,event)
{
//event.preventDefault();
if( event.which == 2 ) {
//todo something
//window.open($("#test").attr("href"));
alert("middle button");
return false;
}
if(cntrlIsPressed)
{
//window.open($("#test").attr("href"));
// ctrl + click
return false;
}
//todo something
window.location.href = $("#test").attr("href");
return true;
}
</script>
You can simply set the href attribute on the a tag to the current page url, this way when a user clicks it will open the same page (reload) and if he middle clicks it will open the same page in a new tab.
If you want to use that on multiple pages then you can set the href in javascript to the current page url like this
document.getElementById('myId').href = location.href
You can try this approach (html):
Text
Javascript:
$(function () {
$("#mylink").click(function (event) {
if ((event.button == 0 && event.ctrlKey) || event.button == 1) {
event.preventDefault();
window.open("http://www.google.com");
}
else
if (event.button == 0)
window.location.reload();
});
});
I have two options for you.Pure javascript and with the use of jquery.
Here's the full code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#jqueryStyle').mousedown(function(e){
//3 is right click
if(e.which == 3){
window.open("http://www.w3schools.com");
//1 is for click
}else if(e.which == 1){
reloadPage();
}
});
});
function reloadPage(){
location.reload();
}
function onMouseDown(e,obj){
e = e || window.event;
//3 is for right click
if(e.which == 3){
window.open("http://www.w3schools.com");
//1 is for click
}else if(e.which == 1){
reloadPage();
}
}
</script>
</head>
<body>
<a href="#" id="jqueryStyle">JQuery Code</a ><br/>
<a href="#" onmousedown="onMouseDown(event,this)">Pure Javascript Code</a >
</body>
</html>
Hope that helps.
Related
I wrote the below code for disabling the scroll in the mouse while it is clicked.
but my code does not work an when I click with the scroll of my mouse it opens my link.
Here is my code :
$('a').on('mousedown', function(e) {
if (e.which === 2) {
console.log('Disabled');
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
click here
You have to use auxclick in order to disable this feature. Replace your 'click' with 'auxclick', and add e.preventDefault(), it will work, tested in chrome and FF
$('a').on('auxclick', function(e) {
if (e.which === 2) {
e.preventDefault();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
click here
You can use event.preventDefault() to cancel a action
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button pressed, dont open");
}
}
click here
try the code below, thanks :
click here
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script>
<script>
var el = document.getElementById('link_click');
el.onmousedown = mouse_down;
function mouse_down() {
alert('mouse_down() called');
return false;
}
</script>
The following code is running but I want to stop the browser refresh. By using onbeforeunload(), its detecting everything like closing the tab, clicking on another link etc. But I want to detect the browser click. So how to do that?
<html>
<head>
<script type="text/javascript">
onbeforeunload=function(){
return false; //This is showing a pop up, which should not come.
}
if (document.addEventListener) { \\adding event listener
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
}, false);
}
else {
document.attachEvent('oncontextmenu', function() {
window.event.returnValue = false;
});
}
document.onkeydown = function() { //switch case to detect refresh from keyboard
switch (event.keyCode) {
case 116 : //F5 button
event.returnValue = false;
event.keyCode = 0;
return false;
case 82 : //Ctrl+R button
if (event.ctrlKey) {
event.returnValue = false;
event.keyCode = 0;
return false;
}
}
}
</script>
</head>
<body>
<div>name: <input type="text"></input></div>
</body>
</html>
I want this form to redirect me to a page based on what is in the input fields. The problem is that i see the console.log but the page simply refreshes instead of taking me to the page i want to go
input has id="inputLink"
submit has onsubmit="submitPage()"
The function
var inputVal = $('#inputLink');
function submitPage(){
$(inputVal).on('keypress', function(event) {
if (event.keyCode == 13) {
if($(inputVal).val() == 'home'){
window.location.href = 'index.php';
console.log('1');
}else if($(inputVal).val() == 'services'){
window.location.href = 'services.php';
console.log('2');
}else if($(inputVal).val() == 'portfolio'){
window.location.href = 'portfolio.php';
console.log('3');
}else if($(inputVal).val() == 'about'){
window.location.href = 'about.php';
console.log('4');
}else if($(inputVal).val() == 'contact'){
window.location.href ='contact.php' ;
console.log('5');
}else{
alert('undefined');
console.log('6');
}
}
});
}
Change onsubmit to onsubmit="submitPage(); return false;". Also your logic can be greatly simplified by changing the home value to index and implementing the following.
$('#inputLink').on('keypress', function(event) {
if (event.keyCode == 13) {
var where = $('#inputLink').val();
window.location.href = where + '.php'
}
}
I would recommend adjusting your jquery to be prepared once the page has loaded -- you don't need to have it in it's own function since jquery is capable of listening for events on its own. I would also remove the onsubmit event attribute since a "submission" implies that you are submitting form data, but in this case, your input and accompanying button is acting as a dynamic link. You can also clean up the jquery a little by better utilizing your inputVal variable.
<script>
$(function() {
var inputVal = $('#inputVal').val();
$('#goLink').on('click', function(event) {
if (event.keyCode == 13) {
if(inputVal == 'home') {
window.location.href = 'index.php';
console.log('1');
} else if(inputVal == 'services') {
window.location.href = 'services.php';
console.log('2');
} else if(inputVal == 'portfolio') {
window.location.href = 'portfolio.php';
console.log('3');
} else if(inputVal == 'about') {
window.location.href = 'about.php';
console.log('4');
} else if(inputVal == 'contact') {
window.location.href ='contact.php' ;
console.log('5');
} else {
alert('undefined');
console.log('6');
}
}
});
})
</script>
And then you could use this HTML without a form:
<input id="inputLink" type="text"></input>
<input id="goLink" type="button">Go!</input>
Im trying to call ng-click from jQuery but cant get it work. Can someone tell me how to do it properly?
HTML:
<a ng-click="changeData()">Testing</a>
<a ng-click="changeData()">Testing 2</a>
<a ng-click="changeData()">Testing 3</a>
jQuery:
$(document).keydown(function(e){
if (checkNav && checkNav()) return;
if (e.keyCode == 37) {
// left
setCurrent(x,y-1);
e.preventDefault();
} else if (e.keyCode == 38) {
// up
setCurrent(x-1,y);
e.preventDefault();
} else if (e.keyCode == 39) {
// right
setCurrent(x,y+1);
e.preventDefault();
} else if (e.keyCode == 40) {
// down
setCurrent(x+1,y);
e.preventDefault();
} else if (e.keyCode == 13) {
$('a[ng-click="changeData()"]')
}
});
I want it to call same function as ng-click when clicking enter. It works fine if I have the following code for hrefs when clicking enter:
} else if (e.keyCode == 13) {
window.location = current.attr('href');
e.preventDefault();
}
Thanks!
I think you mean you want something like this. Let me know if this is your intent or not:
index.html
<input ng-keyup="keyFn(event=$event)" ngclick="clickFn()">click</input>
controller.js
angular.module('myApp')
.controller('myCtrl', function($scope) {
$scope.keyFn = function(event){
if (event.keyCode && event.keyCode === 13/*enter key*/){
someFunction();
}
};
$scope.clickFn = function(){
someFunction();
}
});
function someFunction(){
console.log("event fired");
//functionality shared between click and `enter` keypress
}
$('a[ng-click="changeData()"]') just fetches the element. If you want to trigger a click you need to call .click() like so
$('a[ng-click="changeData()"]').click();
But I prefer thomas' answer that doesn't use jQuery at all, I don't see why you'd need it. Seems completely unnecessary for this.
When the user press F1 key,I am planning to display our application help and suppress default action.
I tried with different options not to show help popup of IE.
Here is my Code:
document.addEventListener('keydown', function (e) {
if (e.key === 'F1' || e.keyCode == 112) {
e.cancelBubble = true;
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
//my help menu code goes here
}
});
Please let me know how can i achieve in showing the help page of my application instead of IE help.
I am using IE11 version.
You could subscribe to the window.onhelp event:
window.onhelp =function() {
alert();
return false;
}
Try doing this
<script>
$(document).ready(function () {
removedefaulthelp();
function removedefaulthelp()
{
window.onhelp = function () {
return false;
alert();
}
}
document.addEventListener('keydown', function (e) {
if (e.key === 'F1' || e.keyCode == 112) {
removedefaulthelp();
e.cancelBubble = true;
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
//my help menu code goes here
}
});
}
</script>
Refer this for more information.
Here is an example similar to Sukanya's answer, but my solution shows how to extend for the F2-F12 keys, and purposely disregards F-combination keys, such a CTRL + F1.
<html>
<head>
<!-- Note: reference your own JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h1>F-key trap example</h1>
<div><h2>Example: Press the 'F1' key to open help</h2></div>
<script type="text/javascript">
//uncomment to prevent on startup
//removeDefaultFunction();
/** Prevents the default function such as the help pop-up **/
function removeDefaultFunction()
{
window.onhelp = function () { return false; }
}
/** use keydown event and trap only the F-key,
but not combinations with SHIFT/CTRL/ALT **/
$(window).bind('keydown', function(e) {
//This is the F1 key code, but NOT with SHIFT/CTRL/ALT
var keyCode = e.keyCode || e.which;
if((keyCode == 112 || e.key == 'F1') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Open help window here instead of alert
alert('F1 Help key opened, ' + keyCode);
}
// Add other F-keys here:
else if((keyCode == 113 || e.key == 'F2') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Do something else for F2
alert('F2 key opened, ' + keyCode);
}
});
</script>
</body>
</html>