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

问题

I have a div

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

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

Thanks in advance.

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

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.

回答3:

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.

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

回答4:

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.

回答5:

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>

来源：https://stackoverflow.com/questions/30725607/is-there-any-way-to-bind-a-click-event-to-a-divs-left-border-in-jquery

标签

javascript

jquery

html

click