我有一个div
<div id="preview">
</div>
有没有办法将click事件绑定到div的左边框?
提前致谢。
答案 0 :(得分:11)
div {
height:100px;
border:4px solid black;
padding:10px;
}
请尝试此方法
$('div').click(function(e){
if( e.offsetX < 5){
alert('clicked on the left border!');
}
});
修改 - 更好的版本
$('div').click(function(e){
if( e.offsetX <= parseInt($(this).css('borderLeftWidth'))){
alert('clicked on the left border!');
}
});
答案 1 :(得分:1)
我不认为有,但你可以与另一个div建立自己的边界,并设置点击事件!
这是一个例子:
HTML
<div id="preview">
<div id="leftborder"></div>
</div>
CSS
#preview{
width:200px;
height:200px;
background-color:black;
border: 5px solid blue;
border-left:0px;
}
#leftborder{
width:5px;
height:100%;
background-color: blue;
}
JS
$( "#leftborder" ).click(function() {
alert( "Left border clicked!" );
});
JS部分是jquery所以你需要首先在头文件中包含它。
答案 2 :(得分:1)
您只有元素上的活动。边界不是元素。但是你可以使用伪元素使它看起来像元素。
$(document).ready(function () {
$(".border:before").click(function () {
alert("Hi");
});
});
.border {border-left: 5px solid #99f; padding-left: 10px; position: relative;}
.border:before {content: " "; display: block; height: 5px; width: 5px; position: absolute; left: -5px; top: 0; background: #f00; height: 1em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>
或者你可以选择包含父元素。
$(function () {
$(".outer").click(function () {
alert("Hi");
});
$(".inner").click(function () {
return false;
});
});
.outer {background: #f00; padding-left: 5px;}
.inner {background: #fff; padding: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="outer"><div class="inner">Hi</div></div>
如果您觉得不应手动添加边框,那么您将使用JavaScript添加事件。您可以动态创建元素并使其可单击。
$(function () {
$(".border").wrap("<div class='outer' />");
$(".outer").click(function () {
alert("Hi");
});
});
.border {border-left: 5px solid #f00; padding: 5px;}
.outer {padding-left: 5px; background: #f00;}
.outer .border {background: #fff; border: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>
或者最好的方法是使用计算出的值和事件。
$(document).ready(function () {
$(".border").click(function (e) {
if (e.offsetX < parseInt($(this).css("border-left-width").replace("px", "")))
alert("Hi");
});
});
.border {border-left: 5px solid #99f; padding-left: 10px; position: relative;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>
答案 3 :(得分:0)
边框是不是元素,因此您无法将click
事件绑定到它。如果您想要这种类型的功能,则需要在左边缘放置一个元素 div ,并绑定到该。
答案 4 :(得分:0)
这是一个简单的例子
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.preview {
background-color:#F5F5F5;
width: 50%;
height: 200px;
padding:10px;
border: 10px solid #FF0000;
}
</style>
</head>
<body>
<div id="el" class="preview"></div>
<!-- Script at the end -->
<script type="text/javascript" >
$('#el').click(function(e) {
var $this = $(this);
// Define the border with
var border_width = 10;
// Get the offset
var offset = $this.offset();
offset.left = e.pageX - offset.left;
offset.top = e.pageY - offset.top;
// Size can be used for calculate click on right border
var size = {
'width' : $this.width()
,'height' : $this.height()
};
if(offset.left <= border_width) {
console.info("border left clicked");
}
});
</script>
</body>
</html>