我不确定如何标题这个问题，但让我解释一下。我有一个包含内容，链接和内部复选框的框。如果您单击框中的任意位置，它将标记复选框。如果单击链接，它也会执行此操作。如果单击链接而不是框，如何禁用对框的检查？ （令我感到困惑，请参阅下面的代码段）
array('Swimwear')$("div").on("click", function() {
var $checkbox = $(this).find(":checkbox");
$checkbox.prop("checked", !$checkbox[0].checked);
});div {
width: 300px;
padding: 20px;
margin: auto;
background: #999;
color: #FFF;
}
input {
display: block;
height: 50px;
width: 50px;
margin: auto;
}
答案 0 :(得分：6)
使用div检查点击是否通过指向event.target途径的链接：
$("div").on("click", function(event) {
if ($(event.target).closest("a").length) {
// It travelled through a link, don't do anything
} else {
var $checkbox = $(this).find(":checkbox");
$checkbox.prop("checked", !$checkbox[0].checked);
}
});
更新了代码段：
$("div").on("click", function(event) {
if ($(event.target).closest("a").length) {
// It travelled through a link, don't do anything
} else {
var $checkbox = $(this).find(":checkbox");
$checkbox.prop("checked", !$checkbox[0].checked);
}
});div {
width: 300px;
padding: 20px;
margin: auto;
background: #999;
color: #FFF;
}
input {
display: block;
height: 50px;
width: 50px;
margin: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet urna risus. Maecenas egestas pellentesque sapien blandit hendrerit. Morbi tellus felis, elementum ut ligula eu, convallis luctus ante. <a href="https://www.google.com" target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
nisl nulla, fringilla et placerat vitae, tempus ut urna.</p>
<input type="checkbox" name="check[]" class="check">
</div>
答案 1 :(得分：4)
我想链接的点击处理程序中的一个好'stopPropagation就可以了。
$("div a").on("click", function(e) {
e.stopPropagation();
});
此prevents your click from bubbling到div。
更新了代码段：
$("div").on("click", function(event) {
var $checkbox = $(this).find(":checkbox");
$checkbox.prop("checked", !$checkbox[0].checked);
});
$("div a").on("click", function(e) {
e.stopPropagation();
});div {
width: 300px;
padding: 20px;
margin: auto;
background: #999;
color: #FFF;
}
input {
display: block;
height: 50px;
width: 50px;
margin: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet urna risus. Maecenas egestas pellentesque sapien blandit hendrerit. Morbi tellus felis, elementum ut ligula eu, convallis luctus ante. <a href="https://www.google.com" target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
nisl nulla, fringilla et placerat vitae, tempus ut urna.</p>
<input type="checkbox" name="check[]" class="check">
</div>
答案 2 :(得分：2)
public class MultiPortRequest<T> extends Request<T> {
private static final String FILE_PART_NAME = "file";
private MultipartEntityBuilder mBuilder = MultipartEntityBuilder.create();
private final Response.Listener<String> mListener;
private final File mImageFile;
protected Map<String, String> headers;
public MultiPortRequest(String url,Response.Listener<String> listener,
ErrorListener errorListener,
File imageFile)
{
super(Method.POST, url, errorListener);
mListener = listener;
mImageFile = imageFile;
buildMultipartEntity();
}
@Override
public Map<String, String> getHeaders() throws AuthFailureError {
Map<String, String> headers = super.getHeaders();
if (headers == null
|| headers.equals(Collections.emptyMap())) {
headers = new HashMap<String, String>();
}
headers.put("Identity", "rHTYsg8vZ/KWTaGOsy0eMNhngJMiZiK60pd9jAUQ+fI=");
return headers;
}
private void buildMultipartEntity()
{
mBuilder.addBinaryBody(FILE_PART_NAME, mImageFile, ContentType.create("multipart/form-data"),
mImageFile.getName());
mBuilder.setMode(HttpMultipartMode.BROWSER_COMPATIBLE);
mBuilder.setLaxMode().setBoundary("xx").setCharset(Charset.forName("UTF-8"));
}
@Override
public String getBodyContentType()
{
String contentTypeHeader = mBuilder.build().getContentType().getValue();
return contentTypeHeader;
}
@Override
public byte[] getBody() throws AuthFailureError
{
ByteArrayOutputStream bos = new ByteArrayOutputStream();
try
{
mBuilder.build().writeTo(bos);
}
catch (IOException e)
{
VolleyLog.e("IOException writing to ByteArrayOutputStream bos, building the multipart request.");
}
return bos.toByteArray();
}
@Override
protected Response<T> parseNetworkResponse(NetworkResponse response)
{
try {
String result = null;
result = new String( response.data, HttpHeaderParser.parseCharset( response.headers ) );
return ( Response<T> ) Response.success( new JSONObject( result ), HttpHeaderParser.parseCacheHeaders(response) );
} catch ( UnsupportedEncodingException e ) {
return Response.error(new ParseError(e));
} catch (JSONException je) {
return Response.error(new ParseError(je));
}
}
@Override
protected void deliverResponse(T response)
{
mListener.onResponse( response.toString());
Log.v("yes", String.valueOf(mListener));
}
}
附加click处理程序需要event.stopPropagation()。根据定义，
它可以防止当前事件在冒泡阶段进一步传播。
这是工作片段。
<a>$("div").on("click", function() {
var $checkbox = $(this).find(":checkbox");
$checkbox.prop("checked", !$checkbox[0].checked);
});
$('.my-link').click(function(e) {
e.stopPropagation();
});div {
width: 300px;
padding: 20px;
margin: auto;
background: #999;
color: #FFF;
}
input {
display: block;
height: 50px;
width: 50px;
margin: auto;
}
答案 3 :(得分：-1)
这可以通过<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet urna risus. Maecenas egestas pellentesque sapien blandit hendrerit. Morbi tellus felis, elementum ut ligula eu, convallis luctus ante. <a class="my-link" href="https://www.google.com" target="_blank">Nulla molestie mollis aliquam.</a> Maecenas
nisl nulla, fringilla et placerat vitae, tempus ut urna.</p>
<input type="checkbox" name="check[]" class="check">
</div>
event.target.nodeName以下是link
希望有所帮助：）