javascript 如果用户在聊天机器人外部点击，我如何添加触发关闭聊天机器人？

i86rm4rw 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(162)

我的HTML代码是这样的：

<div class="chatbot chatbot--closed ">
  <div class="chatbot__header">
    <p><strong>Got a question?</strong> <span class="u-text-highlight">Ask Harry</span></p>
    <svg class="chatbot__close-button icon-speech" viewBox="0 0 32 32">
      <use xlink:href="#icon-speech" />
    </svg>
    <svg class="chatbot__close-button icon-close" viewBox="0 0 32 32">
      <use xlink:href="#icon-close"  data-toggle="modal" data-target="#basicModal" />
    </svg>
  </div>
  <div class="chatbot__message-window">
    <ul class="chatbot__messages">
      <li class="is-ai animation">
        <div class="is-ai__profile-picture">
          <svg class="icon-avatar" viewBox="0 0 32 32">
            <use xlink:href="#avatar" />
          </svg>
        </div>
        <span class="chatbot__arrow chatbot__arrow--left"></span>
        <p class='chatbot__message'><strong class='intro'>Hello, I’m Harry, your virtual assistant. I'm here to help with your general enquiries.</strong>Example of questions you can ask for demo purpose: <br><em>Hi / How are you? / I'd like some financial advice / Can you email me a statement? / Can I get a form? /  How do I cancel my life insurance? </em></p>
      </li>
      <!-- Message here -->
    </ul>
  </div>
  <div class="chatbot__entry chatbot--closed">
    <input type="text" class="chatbot__input" placeholder="Write a message..." />
    <svg class="chatbot__submit" viewBox="0 0 32 32">
      <use xlink:href="#icon-send" />
    </svg>
  </div>
</div>

Demo和完整代码如下：https://codepen.io/trendingnews/pen/wvBorrR?editors=1010
当用户点击关闭聊天机器人时，它将出现一个反馈模式，以填充使用聊天机器人的用户体验。如果用户点击聊天机器人上的关闭图标，它将关闭聊天机器人。我希望聊天机器人可以关闭太当用户点击聊天机器人以外的元素
我该怎么做？

JavaScript

来源：https://stackoverflow.com/questions/59370799/how-can-i-add-trigger-close-chatbot-if-user-click-outside-chatbot

1条答案

按热度按时间

kgsdhlau1#

试试这个：
CodePen

$document.addEventListener("click", function(event) { 
  $target = $(event.target);
  var element = document.getElementsByClassName("chatbot");
  if(!$target.closest('.chatbot').length && !$target.closest('#chat-circle').length && (element[0].style.display == "block")) {
      element[0].style.display = "none";
      document.getElementById("chat-circle").style.display="block";
  }        
});

也许这不是最好的解决方案，但它为我工作。

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 如果用户在聊天机器人外部点击，我如何添加触发关闭聊天机器人？

1条答案

相关问题

热门标签

最新问答