如何在列表中添加到onclick函数，即<li onclick=“”><button onclick=“”></button></li>

Question

基本上，我想创建一个边栏，其中会有很多联系人。 每个联系人都将在列表内。 列表中将有两个onclick函数。 在列表中，两个onclick函数是：1st onclick-单击列表后<li onclick=""></li>它应该打开另一个侧边栏（我已经创建了它）。 第二次onclick-此onclick在<button>即<li onclick=""><button onclick=""></button></li>单击此onclick后，应打开一个新的聊天框（几乎完成）。 但就我而言，每当我单击侧边栏内的任何列表时，它就会同时显示侧边栏和聊天框。 我希望两个onclick函数都可以单独工作。

html代码：

<ul class="list mat-ripple">      
  <li ><img src="img1.png"><span class="name"> abc</span> 
     <button class="btn-link" style="margin-left:65px;color:green;font-size:15px;"> 
        <b>   
          <i class="fa fa-comments" aria-hidden="true"> </i>
        </b>
     </button>
  </li>
  <li>
    <img src="img1.png"><span class="name"> abc</span> 
    <button id="clickme" style="margin-left:65px;color:green;font-size:15px;"> 
     <b>   
       <i class="fa fa-comments" aria-hidden="true"> </i>

       </b>
     </button>
  </li>
  <li onclick="toggle_div_fun('sectiontohide');">
    <img src="img1.png"><span class="name"> abc</span> 
    <button  onclick="showFrontLayer();" style="margin-left:65px;color:green;font-size:15px;"> 
       <b>   
        <i class="fa fa-comments" aria-hidden="true"> </i> 
        </b>
    </button>
   </li>      
  </b>
  </button>
  </li>

  <li onclick="toggle_div_fun('sectiontohide');">
     <img src="img1.png"><span class="name"> abc</span> 
     <button onclick="showFrontLayer();" style="margin-left:65px;color:green;font-size:15px;"> 
       <b>   
          <i class="fa fa-comments" aria-hidden="true"> </i>
       </b>
     </button>
  </li>

</ul> 

列表内的第一个oclick函数需要定位到代码下方（第二个侧边栏需要使用onclick函数进行切换）：

联系人列表Sachin先生

萨钦爵士

萨钦爵士

萨钦爵士

在按钮内的第二次Onclick函数之后，将以下代码作为目标（切换）：

 <div id="div1"> <div id="bg_mask"> <div id="frontlayer"><br/><br/><img src="https://png.icons8.com/go-back/androidL/24" title="Go Back" width="24" height="24" onclick="hideFrontLayer();" style="margin-top:-60px;position:absolute;margin-left:-20px;"> <div id='result'></div> <div class='chatcontrols'> <form method="post" onsubmit="return submitchat();"> <input type='text' name='chat' id='chatbox' autocomplete="off" placeholder="ENTER CHAT HERE" /> <input type='submit' name='send' id='send' class='btn btn-send' value='Send' /> <input type='button' name='clear' class='btn btn-clear' id='clear' value='X' title="Clear Chat" /> </form> </div> </div> </div> </div> 

JavaScript函数：

  <script> function showFrontLayer() { document.getElementById('bg_mask').style.visibility='visible'; document.getElementById('frontlayer').style.visibility='visible'; } function hideFrontLayer() { document.getElementById('bg_mask').style.visibility='hidden'; document.getElementById('frontlayer').style.visibility='hidden'; } </script> 

还有其他代码可以切换2个目标元素（侧边栏和聊天框）吗？ 两者都应在列表中完成

。

Answer 1

假设您已使用jQuery标记了该标签，我将假设您有可用的jQuery。

您可以使用jQuery $('button').click(function(){...})附加点击事件。

因此，您可能想要做的是附加一个click事件， 该事件检查某些功能的状态，并根据这些功能执行不同的操作。

例如，您可以让它检查类“ clicked”，如果没有类“ clicked”，则展开第二个侧边栏并添加类“ clicked”，如果类确实具有“ clicked”您可以执行第二次单击功能。

当然，根据所需行为的具体情况，您可能需要以与添加“单击”类不同的方式来检查和更改状态，但这只是一种方法。

Answer 2

您可以像这样简单地使用jquery使用onclick事件

$(document).ready(function(){
    $('button').click(function(){
        <!---Your Code-->
    });
});

Answer 3

问题在于了解Java事件处理。 您有一个带有click事件的列表元素。 该列表元素包含一个按钮，该按钮也具有click事件。 这意味着，当您单击列表项时，将触发2个事件（这就是为什么看到两个div的原因）。 我认为您可以通过在showFrontLayer和HideFrontLayer函数中使用event.stopPropagation（）来解决此问题，以防止事件目标冒充列表项。

function showFrontLayer(evt) {
   evt.stopPropagation();
   document.getElementById('bg_mask').style.visibility='visible';
   document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer(evt) {
  evt.stopPropagation();
  document.getElementById('bg_mask').style.visibility='hidden';
  document.getElementById('frontlayer').style.visibility='hidden';
}

有关事件捕获和冒泡的更多信息，请参见： https ://javascript.info/bubbling-and-capturing

Answer 4

我猜您需要的是：

event.stopPropagation();

这样可以防止按钮（位于内部）中的事件传播到其父项。

 $('#inner').click(event=>{ event.stopPropagation(); $('#other').toggle(); }); $('#outer').click(event=>{ console.log("outer"); }); 

 #outer { background-color: blue; width: 100px; height: 100px; padding-top: 50px; } #other { background-color: red; width: 100px; height: 100px; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="outer"> <button id="inner">Toggle Visibility</button> </div> <div id="other"> This div has to be toggled on click of the button </div>