有没有办法用jquery将单击事件绑定到div的左边框?

I have a div

我有一个div

<div id="preview">
</div>

Is there any way to bind a click event to this div's left border?

是否有方法将单击事件绑定到此div的左边框?

Thanks in advance.

提前谢谢。

5 个解决方案

#1

div {
    height:100px;
    border:4px solid black;
    padding:10px;
}

Please try this method

请尝试这个方法

$('div').click(function(e){
   if(  e.offsetX < 5){
        alert('clicked on the left border!');
    }
});

Edit - Better version

编辑-更好的版本

$('div').click(function(e){
    if(  e.offsetX <= parseInt($(this).css('borderLeftWidth'))){
       alert('clicked on the left border!');
    }
});

#2

I don't think there is but you can make your own border with another div and set a click event on that!

我不认为有，但是你可以用另一个div创建你自己的边界，并设置一个点击事件!

Here is a example:

这是一个例子:

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;
}

$( "#leftborder" ).click(function() {
   alert( "Left border clicked!" );
});

the JS part is jquery so you gonna need to include that in your header first.

JS部分是jquery，所以需要首先将其包含在标题中。

#3

Borders are not elements, and as such you cannot bind click event to it.If you wanted this type of functionality, you would need to place an element at the left edge of the div, and bind to that.

边框不是元素，因此不能将单击事件绑定到它。如果您想要这种类型的功能，您需要在div的左边缘放置一个元素，并将其绑定。

#4

here is an simple example

这里有一个简单的例子

<!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>

#5

You have have events only on elements. Borders are not elements. But you can make it look like elements by using pseudo elements.

您只有元素上的事件。边界元素。但是你可以通过使用伪元素使它看起来像元素。

$(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>

Or you can go with having a parent element surrounded.

或者可以使用父元素包围。

$(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>

If you feel you should not add borders manually, already you will be adding the events with JavaScript. You can create an element on the fly and make it clickable.

如果您觉得不应该手动添加边框，那么您将使用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>

Or the best way is to use the computed value and events.

或者最好的方法是使用计算出的值和事件。

$(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>

#1

div {
    height:100px;
    border:4px solid black;
    padding:10px;
}