移除/移动Google Chrome左下角状态列（连结网址列） [英] Remove / move the Google Chrome bottom left status bar (link address bar)

问题描述

我在一个网站上工作，该网站在左下角设计有一个关键的导航元素。在Google Chrome中，左下角有一个状态栏，当您滚动页面上的链接并显示网页的网址时，会显示该状态栏。虽然如果你靠得很近，这会移动到右下角。这是导航元素的方式。

I am working on a website which is designed with a key navigation element in the lower left corner. Within Google Chrome there is a status bar on the lower left which appears when you roll over a link on the page and displays the URL of the page. Though if you get close enough this moves to the lower right. This is getting in the way of this navigation element.

我的问题是可以删除/移动（右下角）使用CSS，HTML或JavaScript？请查看下面的一些注释。

My question is can this be removed / moved (lower right) using CSS, HTML or JavaScript? Please see some notes below.

• 理想情况下，我要永久移动到这个位置。


• 我知道这是必需的/最佳实践由于很多原因，所以我想避免删除。


• 我知道我可以从链接中删除href，并使用onClick事件，这可能是一个可能的解决方法，但在这种情况下，向右移动将是一个更好的解决方案。


• 我也确定有一个大的争论，但我正在寻找一个解决方案的参数我必须与之合作。

• Ideally I would like to move this to the right permanently.
• I am aware this is required / best practice for many reasons so I would like to avoid removing.
• I am aware I can remove the href from the link and use an onClick event, this might be a possible workaround but moving right would be a better solution in this instance.
• I am also sure there is a large debate to be had to about having this navigation element lower left anyway, but I am looking for a solution within the parameters I have to work with.

感谢

推荐答案

Chrome从链接中读取HREF属性以在状态栏中显示链接。

Chrome reads the HREF attribute from your link to display the link in the status bar.

从A标签中删除HREF，状态栏将不会显示。但是链接不会工作，:)。这就是为什么你可以在MouseOver上创建一个事件处理程序来解决这个问题，并保持你的链接工作。

So if you remove the HREF from your A tags, the status bar will not be displayed. However the link won't work either, :). That's why you can create an event handler on MouseOver to address that and keep your links working.

$("body").on('mouseover', 'a', function (e) {
    var $link = $(this),
        href = $link.attr('href') || $link.data("href");

    $link.off('click.chrome');
    $link.on('click.chrome', function () {
        window.location.href = href;
    })
    .attr('data-href', href) //keeps track of the href value
    .css({ cursor: 'pointer' })
    .removeAttr('href'); // <- this is what stops Chrome to display status bar
});

您可能会遇到其他问题，例如禁用链接或具有其他事件处理程序的链接。在这种情况下，您可以将您的选择器调整为'a：not（.disabled）'，或者只需将此委派添加到css类。disable-status，因此您的选择器将是：a.disable-status。

You might run in extra issues, like disabled links or links that have other event handlers. In this case, you can tweak your selector to 'a:not(.disabled)' or perhaps just add this delegation to known elements with the css class ".disable-status", therefore your selector would be: "a.disable-status".

这篇关于移除/移动Google Chrome左下角状态列（连结网址列）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！