jQuery如何防止顯示HTML元素標題，即使它的標籤中有標題屬性？

我有一個類似於下面的鏈接，並且我想阻止在鼠標懸停事件上顯示它的標題屬性。但我必須保留它，我不能刪除它。jQuery如何防止顯示HTML元素標題，即使它的標籤中有標題屬性？

<a href="" title="This is a test">Test</a>

我該如何使用jQuery來做到這一點？

來源

2012-05-19 Mohammad Saberi

經過很多次，我意外地找到了解決問題的鏈接。所以我決定把它在這裏...
感謝其作家

http://jsfiddle.net/vkDcG/

HTML：

<a class="fancybox" caption="This is 1st title" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a> 

<a class="fancybox" caption="This is 2nd title" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

的jQuery：

$(".fancybox") 
    .attr('rel', 'gallery') 
    .fancybox({ 
     beforeLoad: function() { 
      this.title = $(this.element).attr('caption'); 
     } 
    });

來源

2013-03-10 19:39:46

這很好。也許人們應該考慮使用諸如數據標題之類的東西，而不是我認爲不標準的屬性「標題」。 HTML5允許數據屬性。 – tomasofen

不錯的作品穆罕默德。我同意@tomasofen，並且我也嘗試了他的建議。我只是在HTML中將「標題」更改爲「數據標題」。在JQuery中，將（'caption'）更改爲（'data-caption'）。像魅力一樣工作，沒有更多的工具提示。 –

堆棧溢出（禁用工具提示，禁止工具提示）有幾個黑客入侵。我認爲這是最乾淨的，它並不需要jQuery的：

https://stackoverflow.com/a/457382/1325290

// Suppress tooltip display for links that have the classname 'suppress' 
var links = document.getElementsByTagName('a'); 
for (var i = 0; i < links.length; i++) { 
    if (links[i].className == 'suppress') { 
     links[i]._title = links[i].title; 
     links[i].onmouseover = function() { 
      this.title = ''; 
     } 
     links[i].onmouseout = function() { 
      this.title = this._title; 
     } 
    } 
}

離開了，如果...抑制部分，如果你不想要它。

來源

2012-05-19 20:32:59

該功能正常工作，但從鏈接中刪除了標題。我遇到的問題是我正在使用Fancybox。我需要在打開的縮略圖旁邊顯示標題，但我不希望在發生鼠標懸停事件時看到任何標題。 –

你可以嘗試用'links [i] .onclick = function（）{this.title = this._title;}'重新添加標題嗎？那麼在縮略圖打開之前，標題就在那裏？或者，你可能會得到它與jQuery數據工作，如此答案http://stackoverflow.com/a/7296899/1325290 –

這種方法已經過時 - 請參閱下面的回覆，以更好的方式來使用現代jQuery做到這一點，它也適用於代碼運行後創建/加載的元素。 –

我唯一的想法是防止鼠標懸停事件形式被觸發。 Posiibly該解決方案將工作：

$("a[title='Titlte is a test']").mouseover(function(e) { 
    e.preventDefault(); 
});

如果這不會幫助你，那麼你可以放在你一個元素一些不透明元素破解這 - 這實際上會做同樣的 - 鼠標懸停evenet不會tiggered。注意：您shoukd觸發點擊鏈接的事件時，它會不透明度元素上catcjed：

$("Opacity element id").click(function(e) { 
    $("a[title='Titlte is a test']").click() 
});

而且同樣用鼠標按下/上的事件，如果他們使用

來源

2012-05-19 20:33:27 Dmitry

這可能是一個安全問題：並非所有瀏覽器都允許在所有標籤上重定向'click'事件:) –

@ Andreas，永遠不會遇到此問題。其實我對這個安全問題一無所知。他們的目標是什麼？如果你的話是正確的，那麼我們不應該使用任何jQuery觸發的可能性，因爲他們可能不會保存 – Dmitry

我試圖在Chrome中preventDefault（），它似乎並沒有抑制工具提示 - 我認爲工具提示是由瀏覽器內部事件/處理程序沒有暴露給JavaScript ... –

的技術是隱藏mouseove標題和在mouseout中恢復。

$("a#test").mouseover(function(e){ 

    var myLink = $('a#test'); 

    myLink.hover(
     function() { 
      old_title = $(this).attr('title');  
      $(this).attr('title',''); 
     }, 
     function() { 
      $(this).attr('title', old_title); 
     } 
    ); 
});

來源

2012-05-19 20:36:42

下面是使用現代的jQuery我的解決方案：

jQuery(document.body) 
    .on('mouseover', 'a[title]', null, function(event) { 
    $(this).attr('data-title', $(this).attr('title')).removeAttr('title'); 
    }) 
    .on('mouseout', 'a[data-title]', null, function(event) { 
    $(this).attr('title', $(this).attr('data-title')).removeAttr('data-title'); 
    });

此處理網頁上的所有現有和未來的一個標籤，並導致很小的內存開銷，因爲它創建只有一個對所有元素的事件處理程序 - 在懸停時，它將值從title屬性移動到data-title屬性，當鼠標離開元素時將再次刪除該屬性。

來源

2013-01-20 16:20:48

對於我來說，我不在乎標題標籤的內容是什麼所以這對我來說比較乾淨。我只是這樣做：

$('a').hover(function() { 

    $(this).attr('title', ''); 

});

其中停止顯示標題標記。

來源

2015-05-13 10:40:00

jQuery如何防止顯示HTML元素標題，即使它的標籤中有標題屬性？

回答

相關問題