Question

我有一个div类“ .square”，如果要在div元素之外单击鼠标，我想显示一个警报，根据该网站上的鼠标事件，我找不到类似的内容w3schools. （我想要与我的实际代码相反）谢谢。

    @Override
    public void onBindViewHolder(MyviewHolder holder, int position) {

        ProductInfo productInfo = mProductList.get(position);
        holder.mProductName.setText(productInfo.getProductName());
        holder.mProductPrice.setText(productInfo.getProductPrice());
        //holder.mProductRating.setText(productInfo.getProductRating());


        Picasso.get()
                .load(productInfo.getProductImage())
                .into(holder.mProductImage);

//new code - start here
holder.anyuielementInItem.setOnClickListener(new View.OnClickListener() { 
        @Override
        public void onClick(View view) 
        { 
            // Do things you want
        } 
    }); 

//

    }

function myFunction() {
  alert('hi')
}

.square{
width: 100px;
height: 100px;
background-color: red;
}

Answer 1

简单的解决方案：将监听器添加到生成alert的窗口中，并将监听器添加到stops the click event from propagating的div中，以使其永远不会到达窗口。

免责声明：调用stopPropagation并不是一件好事，因为它很麻烦，但是我猜您只是在尝试，所以应该没事。

window.onclick = () => alert('hi')

.square{
  width: 100px;
  height: 100px;
  color: red;
  background-color: teal;
}

<div onclick="event.stopPropagation()" class="square">TEST</div>

Here's a good answer描述了实现此目标的更合适的方法。

这是在更正确的解决方案中针对您的情况而调整的答案，我们在该事件中查看点击事件以确定是否应致电alert：

const outsideClickListener = element => ({ target }) => {
  if (!element.contains(target)) {
    alert("hi");
  }
};

const squareEl = document.getElementById("square");
document.addEventListener("click", outsideClickListener(squareEl));

#square{
  width: 100px;
  height: 100px;
  color: red;
  background-color: teal;
}

<div id="square">TEST</div>

为什么我们不应该使用stopPropagation？在一个小型项目中，使用它没有大问题（这就是为什么它是我的最高推荐）。但是在一个大型的现实世界项目中，这是一个错误的建议，因为它可能破坏其他事物的行为。请参见以下示例。开发人员A添加了Test 1，并希望每次用户在alert('hi 1')之外单击时都运行Test 1。但是开发人员B添加了Test 2，该调用会调用stopPropagation来停止所有事件，因此，当用户单击Test 2（位于Test 1之外）时，alert('hi 1')不会运行我们有一个错误。

window.onclick = () => alert('hi 2')

const outsideClickListener = element => ({ target }) => {
  if (!element.contains(target)) {
    alert("hi 1");
  }
};

const squareEl = document.getElementsByClassName("square")[0];
document.addEventListener("click", outsideClickListener(squareEl));

.square, .circle {
  width: 100px;
  height: 100px;
  color: red;
  background-color: teal;
}

.square {
  background-color: teal;
}

.circle {
  background-color: wheat;
}

<div class="square">TEST 1</div>
<div onclick="event.stopPropagation()" class="circle">TEST 2</div>

Answer 2

<div class="square">squre</div>
.square{
  width:200px;
  height:200px;
  border:1px solid red;
}



let sq = document.querySelector('.square');
window.addEventListener('click', function(e){  
    if (sq.contains(e.target)){
       alert('inside square box')
    } else{
       alert('outside square box')
      }
 });

Answer 3

为主体创建一个click事件监听器。

如果单击主体，请检查目标是正方形还是目标是正方形的子项

function myFunction() {
  alert('hi');
}
$(document).ready(function(){
$('body').on('click', function(e) {
  if($(e.target).is('.square') || $(e.target).closest('.square').length) {
    myFunction();

  }
});
});

.square{
width: 100px;
height: 100px;
color: red;
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="square">
</div>
<body>

如果在div外部单击则显示警报

3 个答案: