Question

.black {
  background-color: black;
  width: 500px;
  height: 500px;
}

.red {
  background-color: red;
  width: 200px;
  height: 200px;
}

<a href="#">    
    <div class="black">
        <div class="red"></div>
    </div>
</a>

我正在尝试使用超链接使整个div“黑色”可点击，但没有任何成功的div“红色”区域。我不知道我是应该用css还是JS解决它，还是只用HTML5

Answer 1

<强>已更新

我忘了用jquery对象包装目标..抱歉

如果你想阻止子元素触发一个事件，那么可以通过jquery

来做到这一点

 $('a').click( function(e) {
  if($(e.target).is('.black')) {
    console.log('whatever..');
    // or do whatever you want
   } else {
    e.preventDefault();
    }
  });

对于光标，您可以通过css

执行此操作

.red {
cursor: default;
}

Answer 2

您可以使用event.stopPropagation：

<强> HTML

<a href="#">    
    <div class="black">
        <div class="red"></div>
    </div>
</a>

<强> JS

$(".black").click(function(e) {
  alert("black");
});

$(".red").click(function(e) {
  e.stopPropagation();
});

<强> CSS

.black {
  background-color: black;
  width: 500px;
  height: 500px;
}

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

EXAMPLE FIDDLE

Answer 3

在结构化方面，可能值得探索一种不同的方法。

从.mr-red

.mr-black

在.mr-red

.mr-black

.mr-brown

排名.mr-red absolute并将其放置在.mr-brown内，覆盖.mr-black

.mr-brown {
  position: relative;
  height: auto;
  width: auto;
  display: block;
}

.mr-black {
  background-color: black;
  width: 500px;
  height: 500px;
}

.mr-red {
  background-color: red;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="mr-brown">
  <a href="#">
    <div class="mr-black"></div>
  </a>
  <div class="mr-red"></div>
</div>

Answer 4

我会将它们完全分开并使用绝对定位将红色方块放在正确的位置。

 //NOTE: These code should be executed on Device B
 //Starting WiFi Direct Transmission
 //First we should establish a connection
 WifiP2pConfig config = new WifiP2pConfig();
 config.deviceAddress = remoteWifiP2pDevice; 
 //remoteWifiP2pDevice is the address of device A obtained from NFC
 config.wps.setup = WpsInfo.PBC;
 mManager.connect(mChannel, config, new WifiP2pManager.ActionListener() {
        @Override
        public void onSuccess() {
            //success logic
            Toast.makeText(MainActivity.this, "success", Toast.LENGTH_SHORT).show();
            if (!FILE_RECV)
            {
                new SendFilesTask().execute("");
            }
        }
        @Override
        public void onFailure(int reason) {
            //failure logic
            Toast.makeText(MainActivity.this, "failed" + reason, Toast.LENGTH_SHORT).show();
        }
    });

intentFilter.addAction(WifiP2pManager.WIFI_P2P_STATE_CHANGED_ACTION);
intentFilter.addAction(WifiP2pManager.WIFI_P2P_PEERS_CHANGED_ACTION);
intentFilter.addAction(WifiP2pManager.WIFI_P2P_CONNECTION_CHANGED_ACTION);
intentFilter.addAction(WifiP2pManager.WIFI_P2P_THIS_DEVICE_CHANGED_ACTION);         
mManager = (WifiP2pManager) getSystemService(Context.WIFI_P2P_SERVICE);
mChannel = mManager.initialize(this, getMainLooper(), null);
mReceiver = new WiFiDirectBroadcastReceiver(mManager, mChannel, this);

Answer 5

const clickableBox = document.querySelector(".black")
const anchor = document.querySelector("a")
anchor.addEventListener("click", (e) =>
    e.target !== clickableBox && e.preventDefault())

https://jsfiddle.net/korwx3qv/4/

Answer 6

这是如此利益问题。请看看这里：

<a href="#">    
    <div class="black">
        <div class="red"></div>
    </div>
</a>

.black {
  background-color: black;
  width: 500px;
  height: 500px;
}

.red {
  background-color: red;
  width: 200px;
  height: 200px; 
  cursor: default;
}

 $('a').click( function(e) {
  if($(e.target).is('.black')) {
    alert('.black');    
   } 
  });

在此处演示：https://jsfiddle.net/kkz6y7uo/2/

希望它会对你有所帮助:)。

父div可以在另一个div之间单击

6 个答案: