Develop Reference

mimic a click on a download link using another click

adown is a link to a file to be downloaded
it works on my page
btndown is a button to mimic adown click
but simply - doesn't work - nothing happens on btndown click
any help
$('#btndown').on('click', function(){
$('#adown').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id='adown' href='test.html' download>down</a>
<button id='btndown'>CLICK</button>

To trigger the click on the a element in order for it to initiate the download you need to fire the event on the Element object, not the jQuery object:
$('#btndown').on('click', function() {
$('#adown')[0].click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="adown" href="test.html" download>down</a>
<button id="btndown">CLICK</button>
Note that I would suggest not using this pattern though, as it's very easily broken by both users disabling JS and by browser updates. I would suggest changing the button to a duplicate <a download> element, styled as necessary if that is the reason behind changing the element type.

Remove button hover effect after tap on mobile?

I have a basic JS flashcard game I made. There are 12 "answer buttons" for a user to choose from.
On mobile, the answer buttons retain the hover effect/focus(?) after being tapped (this does not happen on desktop, any browser). This is very confusing from a user standpoint as it can appear as though the app/flashcard is stuck or not updating.
I'm using Bootstrap 4.1.
Here is my button code, but there's nothing unusual about it:
<button type="button" id="E" class="btn btn-lg btn-info ansBtn" value="E">Answer</button>
I've looked at similar questions (but they were regarding bootstrap 3), which suggested using either an anchor tag instead of the button tag, but that didn't work (with and without the href attr).
I've also tried another suggestion to include this bit of jQuery, but it doesn't seem to work with 4.1 either. I've used button ID, and other classnames, but it has not worked.
$(".btn").mouseup(function(){
$(this).blur();
});
Suggestions? Thanks!
Update
So here is the latest. I've added the below CSS. This give mobile users the experience I want (a "flash" of background-color/border-color change only on click/tap). HOWEVER, now when using my macbook pro and TAPPING with my trackpad, the effect does not occur! It works when I click with the trackpad, but not tap with the track pad. :(
.btn.btn-info {
background-color: #17a2b8
}
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle {
background-color: #117a8b;
border-color: #10707f;
}

You can always add a .setTimeout() function on the objects .onHover() or .onClick() event. This will allow your flashcard to be flipped/blurred after a certain amount of time. Alternatively, you can simply change the functionality of your application for mobile browsers and make it so you have to click to see the answer. You should also look into the .focus() method and possibly try to change focus to another element on the page. If none of this is working, it is probably some quirk with jQuery. I would suggest trying to selct the element this way:
document.querySelector(".btn").onmouseup = function(){
this.blur();
});
or:
document.querySelector(".btn").onmouseup = function(){
document.body.focus();
});

Using 'href="#"' needs 2 Back presses in some browsers

I have javascript that uses 'href="#"' to call a function when it's clicked. The problem is that when I run it on Chrome, I need 2 Back presses to return to the referrer page, but on Opera, I only need 1 Back press.
I read the details about using 'href="#"' here:
What is href="#" and why is it used?
here is my test code:
<p>
<script type="text/javascript">
function testOnClick(){
document.write("onClick() support was detected!<br>");
}
</script>
</p>
Clicking on the link should clear the screen and display progress text<br />
<a onclick="testOnClick();" href="#!">
Click here to test onClick
</a>

You might need to use event.preventDefault();
function testOnClick(event) {
event.preventDefault();
document.write("onClick() support was detected!<br>");
}
It prevents your navigator to navigate to the # link, thus, having to press back.

You can also get similar functionality by using a different element and making it look like a link. If you aren't navigating the user to a different section of the page or a new page, for example, you probably should be using the <a> tag.
Here's a fiddle for what I mean: http://jsfiddle.net/2ph2d2gd/
The use case for this would be to open a modal, or do some other action that doesn't necessarily navigate the user anywhere. I don't know your specific circumstances, so you may or may not want to use something like this.
Note: I used alert instead of document.write because jsfiddle doesn't allow the latter.
HTML:
Clicking on the link should clear the screen and display progress text<br />
<span class="link" onclick="testOnClick();">
Click here to test onClick
</span>
CSS:
.link{
text-decoration:underline;
color:blue;
cursor:pointer;
}
Javascript:
function testOnClick(){
alert("onClick() support was detected!");
}

I've had good results leaving the href blank in this scenario. It doesn't reload the page with "#" at the end of the URL and events still fire.
I'm not sure how well that works with JS onclick, but you could replace that with jQuery.
<script type="text/javascript">
$(function() {
$("#link").on("click", function() {
alert("click");
});
});
</script>
<a id="link" href="">
Click here to test onClick
</a>

If you use href="#", make sure onclick always contains return false; at the end, that any called function does not throw an error and if you attach a function dynamically to the onclick property make sure that as well as not throwing an error it returns false.
OR
Use href="javascript:void(0)"
More information about why can be found in this question

Chrome ignoring jquery click function

I have the following html/code that works fine in IE but when I click the link in Chrome, nothing happens.
The HTML is as follows:
<h1 id="pagetitle">Daina - kora dziesmu kr&#257jums</h1>
<div class="frontpage">
<p id="arvilcinu">Ar vilci&#326u R&#299ga braucu</p>
</div>
<!--***************** Ar Vilcinu *******************-->
<div id="arvilcinudisplay" class="singlesong">
<p>Click here to download PDF file for printing</p>
<p>Click here to watch the video - sung by Daina</p>
<p id="back"><img src="backbutton.jpg" alt="Back to Main menu" height="40" width="100"></p>
</div>
The jquery bit of script is as follows:
$("#arvilcinu").click(function(){
$(".frontpage").fadeOut(1000,function(){
document.getElementById("pagetitle").innerHTML = "Ar vilci&#326u R&#299ga braucu";
$("#arvilcinudisplay").css("display","block");
});
});
The idea is that when the user clicks the link (id=arvilcinu) that the link fades out and the relevant info is then displayed. Clicking the link in Chrome just makes the screen flash for a second but nothing on the screen changes.
Thanks

You need to use preventDefault() to remove natural behaviour of link and to fire click event written by you, like below :
Also you can write your code in jQuery only (no javascript) --
$("#arvilcinu").click(function(e){
e.preventDefault();
$(".frontpage").fadeOut(1000,function(){
$("#pagetitle").html("Ar vilci&#326u R&#299ga braucu");
$("#arvilcinudisplay").show();
});
});
Working Demo

It is because of the two event will be occur when you click on the link. one is of your anchor tag <a href="" >... and another is of your click event on element whose id is arvilcinu. anchor tag is inside of the <p id="arvilcinu"> which leads to this behaviour.
You need to prevent default behaviour of the <a> tag which will be done by using
event.preventDefault() function on the event.
If this method is called, the default action of the event will not be triggered.
You code should look like below :
$("#arvilcinu").click(function(e){
e.preventDefault();
// rest of you logic on click event
});

jQuery click not recognized

I have a test page here: http://www.problemio.com/test.php
and if you press "Click To Test Signup" you get a form. If on that form, you click "Log In" it recognizes that you clicked that, and opens the login form.
But the problem is that on the login form, if you press "create profile" it actually goes to the url of the href tag and not to the jQuery click event.
My quetion is what is the best practice of doing this? I hered of something called "prevent default behavior" but not sure how/when it should be used.
I am guessing that if the user has JS disabled, they should still be able to log in. How can I set it up so that users can log in and make accounts in the jQuery way first, and some default way if they have JS disabled?
Thanks!

You can do this with pure jQuery with
$("#createprofilelink").click(function(event) {
event.preventDefault();
{create profile logic}
});
more details of this can be seen in the jQuery documentation http://api.jquery.com/event.preventDefault/
Edit: I removed this because of #maxedison comment that it stops the jQuery event from firing but I have just tested this and the jQuery event fires but the link does not go to the address.
<a id="thelink" href="http://www.google.com" onclick="return false;">the link</a>
<script>
$('#thelink').click(function(){alert('alert me');});
</script>
As for the JS being disabled part of the question the link really should point to to a real form to fill in, as Taryn East correctly says, so the user gets the same functionality even if the user experience is lower by not using JavaScript.
You could even go down the noscript route
<noscript>
<div>Your user experience would be far improved if you
enable JavaScript but if you insist,
Click Here to create your profile</div>
</noscript>

To fix you link-gazumping problem, indeed, as #kamui says, use return false;
But as to your JS-disabled question - point the href at a real URL -> preferably the same URL as your JS-enabled stuff - or the same form, but in a new window.

I could not follow the link due to firewall restrictions on my side but...
You'll want to use whats called unobtrusive javascript.
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
This means if JS is available it will use it, if not continue working as plain html.
using jQuery you would first attach the click event to your button in the $.Ready() method.
<a id='btnTest' href='login.html' />
$(document).ready(function () {
// Attach click event to btnTest
$("#btnTest").click(function (e) {
// do logic
return false; // Returning false here will stop the link from following login.html.
});
});
Hope this helps.