How to open link on new window without calling onclick - javascript

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

Disable mouse scroll middle click event with jQuery

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>

How to prevent refreshing of a page through Javascript/jQuery/ajax

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>

Go to page based on input entry jquery

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>

Can't call angular ng-click from jQuery

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.

prevent default 'F1' event in iE11

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>

Categories