Question

在这个组件中有一个愿望清单按钮（有点像facebook上的“喜欢”按钮）。当我们将鼠标悬停在它上面时，会出现一个带有愿望清单按钮的div的图片，该按钮会根据所点击目标的类别调用“add like”或“remove like”。

showWishListIcon(event, product_id, product_data) {
        if (this.props.header.logIn) {
           **//Here is the Problem**
            if(!event.target.classList.contains("icon_heart-cerise-fill")){
                axios.post(Config.hostname+'myapi/wishlist/add/', formData
                ).then((response) => {
                   //Do Something
               }).catch((err) => {
                })
            }else {
                axios.post(Config.hostname+'myapi/wishlist/remove/', formData
                ).then((response) => {
                    //Do Something
                }).catch((err) => {
                })
            }
        } else {
            this.props.showLogin();
        }
        event.preventDefault();
        event.stopPropagation();
    }

问题是，最初当我点击按钮并且工作正常并且当我将鼠标悬停在div（包含按钮之类似）时然后单击该按钮它仍然可以正常工作，但是当我不悬停时输出并单击按钮两次，侦听器内的事件不会在单击div时获取目标。它将事件作为XMLHttpRequest（响应）作为事件而不是单击来获取。我被困在这里一个星期，无法调试这个。请帮助！

以下是具有点击处理的组件的一部分

<div className={this.state.show && !this.props.mobile && this.state.currentImageIndex === i ?"combo-div":"hidden"}>
  <div className="image-hover">
   <span onClick={() => {this.props.showQuickView(i)}}>quickview</span>
  </div>
  <div className="image-hover"> 
   <i onClick={this.showWishListIcon.bind(this,event,data.id.split('.')[2], data)} className={this.state.wishlist.indexOf(parseInt(data.id.split('.')[2])) != -1 ?"icon icon_heart-cerise-fill":"icon icon_wishlist"}></i>
  </div> 
</div>

手柄在上方。

单击多次时单击“不同目标”

0 个答案: