将<u>标记转换为锚标记

Question

我正在尝试转换一个旧的＆＃34;按钮＆＃34;通过锚标签实现。 ＆＃34;按钮＆＃34;实际上由折旧的下划线标记组成：

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

我的想法是通过调用href属性中的javascript函数将其更改为锚标记，其中＆＃34; something（）＆＃34;调用以前执行过的click（）：

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

然而，

1）我不确定这是否是最佳方式

2）现在，使用＆＃34;点击（）＆＃34;因为该功能无效

我尝试使用chrome调试工具并在单击原始按钮时暂停执行，但所有调用堆栈都显示为＆＃34; r.handle＆＃34;并指出一长串看起来像胡言乱语的代码。

有没有人知道如何设置锚标记按钮来调用下划线标记＆＃34;按钮＆＃34;原来呢？

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

点击带下划线的＆＃34;浏览＆＃34;文本，将打开一个允许您上传文件的弹出窗口。但是因为它只是一个带下划线的文本元素，它被分配了一个类，所以它无法通过键盘进行聚焦或访问。我的任务是通过键盘访问它并使用标签以外的东西。

这个类hoverable背后的javascript代码是：

＆＃13;

＆＃13;

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();
				}
			});

＆＃13;

＆＃13;

＆＃13;

这个网站背后的文件基础庞大，有点令人费解。我对这个项目很新，并不熟悉它，所以如果可以的话，我会尽量避免做很多后端更改。

Answer 1

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

＆＃13;

＆＃13;

//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;
        });
}

＆＃13;

#par {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用锚点结合标签和“文件”类型的输入并隐藏。没有涉及javascript，重点是：

<a href=""><label for= "file"> <input type="file" hidden id="file">Browse</label></a>