将 <u> 标签转换为锚标签答案

【问题标题】：Converting <u> tag to anchor tag将 <u> 标签转换为锚标签
【发布时间】：2018-06-07 19:02:49
【问题描述】：

我正在尝试将旧的“按钮”转换为通过锚标记实现。 “按钮”实际上是由一个贬值的下划线标签组成的：

<u class="hoverable">Browse</u>

我的想法是通过调用 href 属性中的 javascript 函数将其更改为锚标记，其中“something()”调用之前的 click() 操作：

<a class="hoverable" href="javascript:something();">Browse</a>

然而，

1) 我不确定这是否是最好的方法

2) 现在，使用“click()”作为函数什么都不做

我尝试使用 chrome 调试器工具并在单击原始按钮时暂停执行，但调用堆栈中的所有内容都是“r.handle”并指向一长行看起来像乱码的代码。

有谁知道如何设置锚标签按钮来调用下划线标签“按钮”最初的作用吗？

编辑：我正在尝试修复其他人不久前编写的这段代码，所以我并不完全熟悉它。它所在的页面部分是

当您单击带下划线的“浏览”文本时，会打开一个弹出窗口，允许您上传文件。然而，因为它只是一个被分配了一个类的带下划线的文本元素，所以它不能通过键盘获得焦点或访问。我的任务是让它可以通过键盘访问并使用标签以外的东西。

悬停类背后的javascript代码是：

this._hoverable( this.buttonElement );

		this.buttonElement
			.addClass( baseClasses )
			.attr( "role", "button" )
			.bind( "mouseenter" + this.eventNamespace, function() {
				if ( options.disabled ) {
					return;
				}
				if ( this === lastActive ) {
					$( this ).addClass( "ui-state-active" );
				}
			})
			.bind( "mouseleave" + this.eventNamespace, function() {
				if ( options.disabled ) {
					return;
				}
				$( this ).removeClass( activeClass );
			})
			.bind( "click" + this.eventNamespace, function( event ) {
				if ( options.disabled ) {
					event.preventDefault();
					event.stopImmediatePropagation();
				}
			});

此网站背后的文件库庞大且有些复杂。我对这个项目还很陌生，还不是很熟悉，所以如果可以的话，我会尽量避免做很多后端更改。

【问题讨论】：

首先对于事件你需要使用按钮，对于链接你应该使用锚标签。我依赖可访问性规则。
可能您不想为此使用 href，更多信息请参见 stackoverflow.com/a/9440536/8542002
<a> 标签用于页面导航，<button> 标签用于屏幕活动。您应该能够使用 CSS 使 <button> 和 <a> 看起来相同。您能否发布更多您的 HTML 和 CSS，以便我们了解您从什么开始以及您想要什么？
当您没有向我们展示它实际做了什么时，我们应该如何知道如何“调用下划线标签“按钮”最初所做的事情”。你只是向我们展示了你想出的一些不起作用的东西，而不是原来的东西。
当您点击 u 标签的文本时，它会成功打开文件上传窗口。并不是说某些东西不起作用（除了此文本不可聚焦），而是我需要创建一些可聚焦但在单击时会执行完全相同的操作（以及当您在聚焦时按下回车键时））。因为当你点击它时它已经按原样工作了，我想有一些方法可以让带有锚标签（甚至是按钮标签）的东西在点击它时做同样的事情，而不需要像我尝试的那样对 javascript 添加很多内容尽可能避免编辑。

标签： javascript html

【解决方案1】：

您可以将点击事件侦听器添加到所有 a 元素，如下所示。您需要确保您拥有 e.preventDefault() 的最后两行并返回 false；以确保页面不会离开。这根本不使用href，但我应该注意，如果您完全省略href，而不是将其设置为空字符串，超链接将不会突出显示。

//get all A elements
var tags = document.getElementsByTagName('a');

//add the event listener to each element
for (let i=0; i<tags.length; i++) {
	tags[i].addEventListener("click",function(e) {
	    document.getElementById('par').style.display = "block";
        
            //these two are needed to prevent the browser from navigating away from the page
 	    e.preventDefault();
            return false;
        });
}

#par {
  display: none;
}

<a href="">Click Me to Reveal a Message:</a>
<p id="par">This is how you register a click handler to a hyperlink element.</p>

【讨论】：

【解决方案2】：

您可以使用结合了标签和“文件”类型的输入和隐藏的锚点。不涉及javascript，重点就在那里：

&lt;a href=""&gt;&lt;label for= "file"&gt; &lt;input type="file" hidden id="file"&gt;Browse&lt;/label&gt;&lt;/a&gt;

【讨论】：