我正在尝试转换一个旧的"按钮"通过锚标签实现。 "按钮"实际上由折旧的下划线标记组成:
<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代码是:
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;
这个网站背后的文件基础庞大,有点令人费解。我对这个项目很新,并不熟悉它,所以如果可以的话,我会尽量避免做很多后端更改。
答案 0 :(得分:0)
您可以将click事件侦听器添加到所有元素,如下所示。你需要确保你有最后两行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;
});
}
&#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;
答案 1 :(得分:0)
您可以使用锚点结合标签和“文件”类型的输入并隐藏。没有涉及javascript,重点是:
<a href=""><label for= "file"> <input type="file" hidden id="file">Browse</label></a>