javascript - How to trigger on Hover over Border - Stack Overflow

admin管理员组

文章数量:1326287

I want to react if a user hovers over a border (or into its near).

I got an table for ERD / UML diagrams and I want to give the user the opportunity to resize this table by dragging the tables border. I am working with jQuery and pure JS. My tables are rectangles and its positions are known (x1, x2, y1, y2, width , height , (x1 | y1 ) is top-left, (x2 | y2) is bottom-right ). Every table has the class "diagram" , so I thought about triggering the ."diagram".hover and check the mouse position, but this would be non performant.

I am mainly searching for idears, but short examples would be great.

Code update:

I want to react if a user hovers over a border (or into its near).

I got an table for ERD / UML diagrams and I want to give the user the opportunity to resize this table by dragging the tables border. I am working with jQuery and pure JS. My tables are rectangles and its positions are known (x1, x2, y1, y2, width , height , (x1 | y1 ) is top-left, (x2 | y2) is bottom-right ). Every table has the class "diagram" , so I thought about triggering the ."diagram".hover and check the mouse position, but this would be non performant.

I am mainly searching for idears, but short examples would be great.

Code update: http://codepad/3xr8H39m

• javascript
• jquery
• css
• hover

Share Improve this question Follow edited Dec 26, 2016 at 12:32 Sinmson asked Dec 26, 2016 at 12:03 SinmsonSinmson 23711 gold badge44 silver badges1414 bronze badges 1

• 3 Post what you have tried so far – Sankar Commented Dec 26, 2016 at 12:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Wrap it in a wrapper and prevent event happening in its children. See below:

var border = document.getElementById("border");

border.onmouseover = function(e) {
  if(e.target !== e.currentTarget) return;
  console.log("border-hover")
}

#border {
  padding: 4px;
  background: blue;
  box-sizing: border-box;
  cursor: pointer;
}

.box{
  height: 100px;
  width: 100%;
  background: white;
  cursor: default;
}

<div id="border">
<div class="box"></div>
</div>

As I know, there is no special method to catch hovering over borders, so you will need some workaround. The first way is to create external container wrapped around the table, with some pixels padding, so you will have some border, and detect hovering over both external container and the inner table, like here:

<script type="text/javascript">
    $(function() {
        var innerHover = false;
        $('.inner_table')
            .on('mouseover', function() {
                innerHover = true;
            })
            .on('mouseout', function() {
                innerHover = false;
            });
       // check if we can start resizing
       $('.external_wrapper').on('click', function() {
           if (!innerHover) {
               // we can start resizing!
           }
       });
   });
</script>

<div class="external_wrapper" style="padding: 3px;">
    <table class="inner_table">
    ...
    </table>
</div>

The other way is to create thin additional divs along all four table borders and use them as click anchors. This way is user in jQueryUI dialog widget. It is much more flexible as you will not be glued to container borders.

本文标签： javascriptHow to trigger on Hover over BorderStack Overflow