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作为attribut添加到按钮，如果是点击示例，则为其提供运行的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>

排除焦点事件的元素

2 个答案: