天道酬勤,学无止境

Preventing cursor change on link click in Chrome

Question

Clicking on a link in Chrome (not Safari or Firefox) changes the cursor from pointer to arrow. Can this behavior be prevented? I.e., is it possible to still have the pointer after clicking, but while the cursor is still hovering over the link?

EDIT: Okay so I've done a little more testing. First of all, the only reason anyone would want the cursor to remain as a pointer after clicking on a link is if the link does not actually load another page but rather fires a JS event instead.

<a href="test">Test</a>

// JQuery
$("a").click(function(event) { event.preventDefault(); }

With the above code, event.preventDefault (or returning false) will allow the cursor to remain a pointer after click. This will suffice for most uses, namely triggering a DOM manipulation and/or AJAX request.

The problem is with history.pushState():

<a href="test">Test</a>

// JQuery
$("a").click(function(event) {
    history.pushState(arg1, arg2, url);
    event.preventDefault(); return false;
}

Here the pointer DOES change to an arrow. Any ideas on how to stop that from happening?

Answer1

This sounds like a CSS issue. Look for code like the following:

::-webkit-any-link:hover,
::-webkit-any-link:active { cursor: pointer; }

This will affect all links (like a[href]) but only in WebKit. Perhaps something else is preventing Safari from doing this.

UPDATE GIVEN EXPANDED QUESTION:

Now that we know more about the problem, namely that the cursor changes back to a pointer after clicking on an element fires off a javascript, I would say that this is a Chrome bug.

Please file a report at http://bugs.chromium.org/

Answer2

You could explicitly set your target element's CSS to include --

#element {
    cursor: pointer;
}


See http://www.quirksmode.org/css/cursor.html#note if you have to support IE 5.5.

Answer3

In the meantime I'm thinking this desperate workaround:

  1. Browser detect Chrome
  2. Apply this tutorial

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

相关推荐
  • Weird z-index behaviour preventing mouse interactions: bug or normal?
    Question Every time I try to use z-index in a webpage to change the order of stacking overlapping divs, I seem to run into a problem where the div that is being forced lower becomes unresponsive to mouse events. In my current situation I have: <div class="leftcolumn"> <div class="leftbar"></div> <!-- a 95px wide bar on the left --> ... <h3>header</h3> <!-- a little header sitting inside the leftbar ... </div> By default the h3 isn't showing - it's hidden behind the leftbar. If I add z-index: 5; to the h3, it still doesn't show. So I add z-index: -1 to the leftbar. Now it's hidden behind the
  • How to disable link to phone number when on Desktop?
    Question How can I add a phone number to a website that is clickable but hides the link when I'm browsing on a website that doesn't support touch. I could use Modernizr to set it up although. I don't know how. <a href="tel:1300723579"><p><img src="assets/images/bt_calltoaction.gif" alt="View Projects" width="306" height="60"></p></a> Answer1 I was just dealing with this issue, looking up solutions, and I found this thread (and a few others). I have to confess that I couldn't get any of them to work properly. I'm sure I was doing something wrong, BUT I did figure out a cheat. As others have
  • Selecting text on focus using jQuery not working in Safari and Chrome
    Question I have the following jQuery code (similar to this question) that works in Firefox and IE, but fails (no errors, just doesn't work) in Chrome and Safari. Any ideas for a workaround? $("#souper_fancy").focus(function() { $(this).select() }); Answer1 It's the onmouseup event that is causing the selection to get unselected, so you just need to add: $("#souper_fancy").mouseup(function(e){ e.preventDefault(); }); Answer2 $('#randomfield').focus(function(event) { setTimeout(function() {$('#randomfield').select();}, 0); }); Answer3 This works fine for input type="text" elements. What kind of
  • React Click events not firing on mobile
    Question I've been working with react for a couple of months now, but have just run into something a little weird. Click events aren't being fired at all on mobile devices: http://jsbin.com/morarewelu/1/edit?html,js,output http://jsbin.com/morarewelu/1/ - Check on your device You can see that the click is never fired. Testing on iphone here. Is this expected behaviour, or simply a bug? Answer1 There are a few issues in React's Github project which might be helpful. onClick on mobile not fired MobileSafariClickEventPlugin requires touch events to be initialized Looks like, you need to add a CSS
  • Preventing scroll when using URI hash to identify tab
    Question I'm using JQuery UI to make tabs in my application. I needed the tabs to be linkable (direct link that opens the page and selects the correct tab). This is done by using a hash tag/fragmented identifier. But I have a issue when the content above the tabs and inside the tabs is very long. When clicking the tabs, the page scrolls down to the start of the tab. This is not what I want. I'm using Jquery 1.7.1 and Jquery UI 1.8.16. The javascript/Jquery code is a standard Jquery UI tabs with the addition to the event "tabsshow". This is suggested in Changing location.hash with jquery ui
  • html5 canvas hand cursor problems
    Question I'm playing around with html5 and some javascript to make a minor sketchpad. Whenever I click down on the canvas in chrome, the cursor becomes a text cursor. I have tried putting cursor: hand in the css, but that doesn't seem to work. This has got to be an easy thing, but I look it up and can't find it anywhere Answer1 Use the disable text selection on the canvas. This works like a charm. var canvas = document.getElementById('canvas'); canvas.onselectstart = function () { return false; } // ie canvas.onmousedown = function () { return false; } // mozilla Cheers, Kris Answer2 While the
  • Preventing Links before jQuery is Loaded
    Question How can i prevent links on click event before jQuery is loaded? The reason is i have few links that make AJAX calls through jQuery ajax functions and if user click them before jQuery framework is loaded the browser cant trigger jQuery ajax function and will follow links href="..." Thanks. Edit: Can i use this? <head> ... <script type="text/javascript"> window.onload = prevCl(); function prevCl() { var links = document.links[]; links.onclick = check(); } function check() { if (typeof jQuery == 'undefined') { return false; } } </script> </head> Answer1 Four options for you: Option 0 Go
  • Python crawling TikTok short video detailed tutorial (with source code)
    Preface The text and pictures in this article are from the Internet and are for learning and communication purposes only. They do not have any commercial use. The copyright belongs to the original author. If you have any questions, please contact us for processing. Author: merlin & PS: If you need Python learning materials, you can click on the link below to get it yourself Python free learning materials and group communication answers Click to join Douyin crawler production Selected webpage If you want to crawl the videos on Douyin, you must first find the address where you can swipe the
  • Prevent user to find password through Firebug/Chrome Dev Tools
    Question For the passport input field: <input type="text" required="" tabindex="2" class="std_textbox" placeholder="Enter your account password." id="pass" name="pass"> When the <input type="password"> is changed to <input type="text"> The password is revealed. This can be risky in systems which have saved passwords or generated from Password managers. Can client side encryption be used in here? How can it be implemented? Answer1 Short answer: It can not be prevented, unfortunately. This is because all client-side code (JavaScript) is modifiable by the client itself - thus making a client
  • A click in iOS Safari triggers a "hover state" on element underneath where you tapped
    Question On iOS Safari 11, if I have a <div> positioned over an element that has a :hover effect, and the <div> has an event that makes it disappear when clicked, then my link "underneath" gets the hover effect applied after the element is removed from the DOM. See below for an animated GIF of what I'm talking about: I've given the button a see-through background so you can see the link behind it. When I tap the button in on a spot where the link is not located, the link (i.e. Some link) stays blue and does not change to its hover state of red. However, when I tap the div in a spot that
  • when div with absolute position is added cannot click on links
    Question I have menu on a page and div that is absolute positioned. The problem is that when this div is on a page, then I cannot click on any links in menu items. When I remove this div (#left_border), then links are clickable again. Why? CSS: #left_border { background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png); background-position: 0 0; background-repeat: no-repeat; width: 1094px; background-size: 100% auto; position: absolute; height: 850px; left: -51px; top: 0px; } HTML: <div id="wrapper"> <div id="content"> <div id="left_border"></div> <div id="left"> <div id="menu">
  • Chrome Extension: Open new tab without losing popup focus
    Question I have a simple list of research links on a Chrome Extension: <a href="http://www.example1.com" target="_blank">Research Link 1</a> <a href="http://www.example2.com" target="_blank">Research Link 2</a> <a href="http://www.example3.com" target="_blank">Research Link 3</a> On any webpage, I could ctrl+click all three links, opening new tabs in the background. However, this doesn't seem to be the case with a Chrome Extension Popup. If you ctrl+click on a link, the extension closes the popup, which prevents you from clicking more than one link at any time. I've tried an on-click chrome
  • <a> link not working by clicking, only work by "Open link in new tab" command
    Question I meet this interesting situation: <ul> @foreach (var item in Model) { <li> <a href="@Url.Action("Details", "Product", new { id = item.Id })" >@item.Name</a> </li> } </ul> When I click a link, nothing happen, product Details page does not open. But I do "Open link in new tab", then it opens. What can be it's reason? Answer1 You have some javascript code which is preventing the default action of the anchor tag to be executed. You could inspect the Network tab in FireBug or Chrome DevTools to see if some AJAX request is being made when you click on the link. You could try excluding
  • Getting the browser cursor from “wait” to “auto” without the user moving the mouse
    Question I use this jQuery code to set the mouse pointer to its busy state (hourglass) during an Ajax call... $('body').css('cursor', 'wait'); and this corresponding code to set it back to normal... $('body').css('cursor', 'auto'); This works fine... on some browsers. On Firefox and IE, as soon as I execute the command, the mouse cursor changes. This is the behavior I want. On Chrome and Safari, the mouse cursor does not visibly change from "busy" to "auto" until the user moves the pointer. What is the best way to get the reluctant browsers to switch the mouse pointer? Answer1 It is a bug in
  • Change cursor type on input type=“file” [duplicate]
    Question This question already has answers here: Styling an input type=“file” button (43 answers) Closed 5 years ago. Simple question... How do I change the cursor type on a file input type? I've tried the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> input[type="file"] { cursor: pointer; } </style> </head> <body> <input type="file"> </body> </html> For some reason, it won't play ball. Answer1 Know this a old thread. But the google results brings this up... I Just found a partial solution to chrome
  • Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)
    Question For a website I want to show a custom context menu when a user "longpresses" the screen. I've created a jQuery Longclick listener in my code to show a custom context menu. The context menu is displayed, but the iPad's default context menu is also displayed! I tried to prevent this by adding a preventDefault() to the event in my listener, but this does not work: function showContextMenu(e){ e.preventDefault(); // code to show custom context menu } $("#myId").click(500, showContextMenu); Questions Can you prevent the iPad's default context menu to show? Can it by done using the jQuery
  • Ask Toolbar preventing Bootstrap Modal to show
    Question I am facing a bit problem with a project which uses bootstrap 2.3.2 framework. Users who has ask toolbar are unable to see bootstrap modal completely as in below given screenshot: Steps to replicate the issue. Install ask toolbar for Google chrome {if not installed) or if installed and disabled, enable it. Go to Getbootstrap documentation website and click on Launch demo modal button to open the modal. The modal will display as shown in the screenshot. Google Chrome is injecting an iframe with some css to all the pages (generally, html pages) to display the toolbar as chrome doesn't
  • why does this not work?? jquery ajax replace content in specific div
    Question Below I have the code on my site, yet when I click on a link in this particular div it just opens a new window, why is this?? $(function(){ //bind a click event to the nav links $("#links a").bind("click", function(e){ //keep the links from going to another page by preventing their default behavior e.preventDefault(); //this = link; grab the url var pageLocation = this.href; //fire off an ajax request $.ajax({ url: pageLocation, //on success, set the html to the responsetext success: function(data){ $("#biocontent").html(data.responseText); } }); }); }); EDIT: I still havnt figured
  • Jquery form upload plugin: how to reduce it to one click?
    Question I am using jquery form plugin to handle uploading files, This is my form, <form action="upload.php" method="post" enctype="multipart/form-data" id="myForm"> <input type="file" multiple="multiple" name="file[]" /> <input type="submit" name="upload" value="Submit"/> </form> <div id="output"></div> The jquery, $('#myForm').submit(function() { $(this).ajaxSubmit({ target: '#output' }); return false; }); The fallback of this idea is that you have to click twice before uploading the files - you have to click to browse the files and then clicking the submit button. How can I reduce it to one
  • How to implement canvas panning with Fabric.js
    Question I have a Fabric.js canvas and I want to implement the full-canvas panning that software packages usually do with a "hand" tool. It's when you press one of the mouse buttons, then move over the canvas while holding the mouse button and the visible portion of the canvas changes accordingly. You can see in this video what I want to achieve. In order to implement this functionality I wrote the following code: $(canvas.wrapperEl).on('mousemove', function(evt) { if (evt.button == 2) { // 2 is the right mouse button canvas.absolutePan({ x: evt.clientX, y: evt.clientY }); } }); But it doesn't