如何禁用html链接而不是调用JS函数？

为了让我的文本与dbpedia有链接，我想知道Javascript中是否存在一种有效的方法，通过单击链接显示带有选定dbpedia信息的div，而不是链接到页面上？我正在寻找某种“显示无”的链接，以允许我显示我的div。我找不到这个方法，它存在吗？如何禁用html链接而不是调用JS函数？

此外，由于Ajax请求，我的文本中的链接是动态生成的，并且它们没有id或class。

这是我在我的文字链接之一：

<a href="http://dbpedia.org/resource/Lorem_ipsum" title="http://dbpedia.org/resource/Lorem_ipsum" target="_blank" on>Lorem Ipsum</a>

来源

2017-12-02 Paul

因此，如果生成的链接动态取之于阻止你添加一个类或事件侦听器？这将使事情变得更容易，以确保您的功能只会触发预期的定位标记 – NewToJS

根据您创建动态定位标记的方式，您还可以添加像这样的偶数听众/调用。我添加了两个方法，因为有些人将元素作为字符串编写而不是使用'.createElement（）'[** JsFiddle Example **]（https://jsfiddle.net/dzst74cs/） – NewToJS

因为链接是动态创建的，你应该使用event delegation得到它们。您可以使用attribute selector来查看仅以特定子字符串开头的链接。然后使用preventDefault在使用AJAX获取信息并将其添加到模式之前禁用链接。

$(document).on('click', 'a[href^="http://dbpedia.org"]', function (e) { 
    e.preventDefault(); 
    // load data from your source 

});

DEMO

非jQuery的版本将是这个样子：

document.addEventListener('click', handleClick, false); 

function handleClick(e) { 
    const el = e.target; 
    if (el.tagName === 'A' && el.href.startsWith('http://dbpedia.org')) { 
    e.preventDefault(); 
    // Do things 
    } 
}

DEMO

来源

2017-12-02 18:53:25 Andy

如何禁用html链接而不是调用JS函数？

回答

相关问题