Как создать нажатие кнопки или ссылку внутри тега <a> и по-прежнему можно щелкнуть правой кнопкой мыши?

Question

Привет В настоящее время я работаю с раскрывающимся меню уведомлений, и каждый <li> содержит ссылку или тег .

Я хочу сделать что-то вроде facebook's notification.

Теперь проблема заключается в том, что я хочу поместить маленькую кнопку или элемент, который можно щелкнуть внутри тега <a>. Или просто Я хочу вложить <a> в тег <a>. После поиска некоторых ответов на google я выяснил, что его невозможно вставить с помощью чисто HTML.

Некоторые предполагают, что поставить <a> внутри <div> с OnClick события. Но это не делает ссылку правой кнопкой мыши как this.

Итак, как мне сделать ссылку с правом щелчка и внутри, есть кнопка с кликом или ссылка?

Спасибо.

Редактировать: После нескольких поисков я дошел до этого кода.

HTML:

<li class="dropdown"> 
    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button">Notification</a> 
    <ul class="dropdown-menu"> 
     <li> 
      <div class="notif-box"> 
       <a href='#' onclick='testfunction();' style="font-size: 50; float: right; text-decoration: none;">X</a> 
       <a href="index.php" id='notif-link-body'></a> 
       <b>Notification title here</b> 
       <p>Content body here</p> 
      </div>  
      </a> 
     </li> 
    </ul> 
</li> 

JS

$(".notif-box").click(function() { 
    var x = $("#notif-link-body").attr("href"); 
    window.location = x; 
    return false; 
}); 

function testfunction(){ 
    alert("It works!"); 
    return false; 
} 

CSS

.notif-box { 
    width: 250px; 
    cursor: pointer; 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.42857143; 
    color: #333; 
    white-space: nowrap; 
} 

.notif-box:hover, 
.notif-box:focus { 
    color: #262626 !important; 
    text-decoration: none !important; 
    background-color: #f5f5f5 !important; 
} 

Единственная проблема в том, когда я нажимаю кнопка «x» все еще перенаправляет меня на index.php после того, как появится предупреждение.

Answer 1

я, наконец, понял это сам. Я сделал структуру, как это ...

<a href="index.php" style="display: block;">//Parent link 
<span class="x-button" style="align: right;">X</span>//The button inside the parent link 
Some text here... 
</a> 

То, что я сделал, я сделал <a>в качестве родительского элемента, так что пользователь может по-прежнему правой кнопкой мыши и сделать что-то вроде открыть ссылку в новой вкладке.

И так, чтобы предотвратить браузер от запуска родительского элемента, когда пользователь нажал ребенок, я использовал JQuery hover() и bind() для отключить родительскую ссылку, когда ребенок завис, и снова включаю его на листах мыши.

$(".x-button").hover(function(){//On mouse enter 
    var parent = $(this).closest('a'); 
    parent.bind('click', false);//Disable the parent 
}, function(){//On mouse leave 
    var parent = $(this).closest('a'); 
    parent.unbind('click', false);//Re-enable the parent 
    parent.blur();//Unfocus the element 
}); 

$(".x-button").click(function() { 
    //Do something on click 
}); 

Answer 2

Если вы используете Bootstrap, вы пробовали:

<div class="dropdown"> 
    <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
    Dropdown trigger 
    <span class="caret"></span> 
    </a> 

    <ul class="dropdown-menu" aria-labelledby="dLabel"> 
    ... 
    </ul> 
</div> 

Реферировано от: http://getbootstrap.com/javascript/#dropdowns