排除焦點事件的元素

Question

我有一個看起來像這樣的div：

    <div class="whole-container" id="body">
  <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
  <div class="queryAndpostswitcher">
     <button id="logOut" name="logOut" title="Log Out From The Site"> <i class="fas fa-sign-out-alt"></i></button>
  </div>
</form>
  <div class="make_a_post" id="container">
    <div class="tabs">
      <button name="make_post" id="post"><i class="fa fa-pencil"></i> Make a post </button>
      <button name="make_query" id="query"><i class="fa fa-question"></i> Make a query </button>
    </div>
    <div class="main-post" id="main-post">
      <textarea placeholder="Enter Your Post Here" minlength="5" onfocus="showButton();" id="postTextArea" onfocusout="makeEveryThingNormal(this.id)"></textarea>
    </div>
    <div class="main-query" style="display: none;" id="main-query">
      <textarea placeholder="Enter Your Query Here" minlength="5" onfocus="showButton();" id="queryTextArea" onfocusout="makeEveryThingNormal(this.id)"></textarea>
      <select name="askTo">
        <option> Friends </option>
        <option> Community </option>
        <option> Both</option>
      </select>
    </div>
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST" enctype="multipart/form-data">
                <label for="multimedia"> <i class="fa fa-camera-retro"></i> Multimedia </label>
                <input type="file" id="multimedia" name="image" style="display: none;"/>
               <input type="submit" style="display: none;"/>
          </form>
          <div class="postingOptions">
        <button id="postButton"><i class="fa fa-tick"></i>Let's Go!</button>
      </div>
      </div>

它有兩個選項來發布帖子或查詢。 我添加了onfocus和onfocusout事件。 我的腳本標簽如下所示：

<script type="text/javascript">
  function showButton() {
    let container = document.getElementById("container");
    let postButton = document.getElementById("postButton");
    let otherPosts = document.getElementsByClassName("post");
    container.style.height = "30%";
    postButton.style.display = "block";
    for(let i=0;i<otherPosts.length;i++){
      otherPosts[i].style.display = "none";
    }
  }
  function makeEveryThingNormal (id) {
    let container = document.getElementById("container");
    let postButton = document.getElementById("postButton");
    let otherPosts = document.getElementsByClassName("post");
    postButton.addEventListener("click", () => {
      alert("Yahooo!");
    })
    container.style.height = "25%";
    postButton.style.display = "none";
    document.getElementById(id).value = "";
    for(let i=0;i<otherPosts.length;i++){
      otherPosts[i].style.display = "block";
    }

  }
</script>

因此，它的作用是僅突出顯示發布div並在輸入焦點時隱藏其他元素。 現在，我應該能夠在單擊按鈕時運行一個功能，但是在單擊按鈕時，該功能不起作用。 因此，如果有類似的功能：

if(button.isClicked===true){
do something;
}`

或者，如果我可以排除聚焦方面的某些因素，那么問題就可以解決。 但是似乎沒有任何作用。 那么，我應該怎么做才能使一切順利？ 請回答！

Answer 1

您可以嘗試將onclick屬性歸因於按鈕，並為它提供一個js函數（如果它是單擊示例）以運行：

 <button onclick="myFunction()">Click me</button> 

您也可以使用JQuery .click和.on捕獲click事件：

$( "#target" ).click(function() {
   alert( "Handler for .click() called." );
});
$( "#dataTable tbody" ).on( "click", function() {
   console.log( $( this ).text() );
});

並且您可以使用addEventListener捕獲點擊：

document.getElementById("myBtn").addEventListener("click", function); 

Answer 2

通過添加setTimeout（）函數使一切正常工作。 我的新代碼如下所示：

    <script type="text/javascript">
  function showButton() {
    let container = document.getElementById("container");
    let postButton = document.getElementById("postButton");
    let otherPosts = document.getElementsByClassName("post");
    container.style.height = "30%";
    postButton.style.display = "block";
    for(let i=0;i<otherPosts.length;i++){
      otherPosts[i].style.display = "none";
    }
  }
  function makeEveryThingNormal (id) {
    let container = document.getElementById("container");
    let postButton = document.getElementById("postButton");
    let otherPosts = document.getElementsByClassName("post");
    postButton.addEventListener("click", () => {
      alert("Yahooo!");
    })
    setTimeout(otherStuffs, 500);
    function otherStuffs () {
    //these things are to run when other areas are clicked!
    container.style.height = "25%";
    postButton.style.display = "none";
    document.getElementById(id).value = "";
    for(let i=0;i<otherPosts.length;i++){
      otherPosts[i].style.display = "block";
    }
    }

  }
</script>