jQuery and click elements

JavaScript
1

I try to make a simple button with jQuery that executes some javascript when clicked. I know there are many articles covering this but I still have some questions.
I first worked with an a element and put onlick in the href parameter, this was the wrong way to do it, so I changed it and later on I had an idea that made everything really easy (designwise). I made a div (in most cases) and with jQuery I coded that if the div was clicked, some scriptwork should run, like this;

<div id="clickMe">Click me</div>

<script>
$("#clickMe").click(function () {
/* some script */
});
</script>

This seemed to be a good solution, but is it really? If it is, then there’s another problem.
When I click such ‘link’ more than once I begin to select/highlight elements on my page. Normal behaviour ofcourse, but how do I stop this?

Thank you in advance.

2

Unless you must use jquery, I would suggest ditching it and use just plain javascript.

<button id="btn1">Click me</button>

<script type="text/javascript">
       document.getElementById("btn1").onclick=function(){alert('Button was clicked');}
</script>
3

Thank you for the reply!
I must use jQuery (it will take a lot more codelines to do it with plain javascript and jQuery makes it easier to read/maintain), so that’s not really an option.
But still, wouldn’t you have the same problem as I described in my first post? That you click the button more times and you select/highlight the text near the button?
I thought about disabling highlighting text, but that would mean the user wouldn’t be able to select anything at all. So, how do I do this?

Thank you in advance.

4

What is the first “it” you are referring to?

If you go look at the amount of code jquery runs in the “background” to perform a given function, I’ll bet that just about on every occassion it will be much, much more than the amount of code required to perform the same function using plain javascript. There is nothing you can do with jquery that cannot be done with plain javascript.

5

It is; Handeling cookies, some image altering, creating animations and cross-browser support.
I know jQuery is javascript but sometimes it just hands shortcuts I like. So, I won’t move away from jQuery.

But my question was if you wouldn’t have the same problem (highlighting text and so on)? And what can I do about the problem?

6

I haven’t tried it. Copy and paste the code and see if you get the problem.

7

Yes, it gives the same problem. Not when you use the <button> element or call an alert window ofcourse but with this it gives the same prob:

<div id="clickMe">Click me</div>
<div id="temp"></div>

<script type="text/javascript">
   document.getElementById("clickMe").onclick=function(){
      document.getElementById("temp").innerHTML = "A very cool site!";
   }
</script>

So am I forced to use the button element or is there a way using a div?

Thank you in advance.

8

You seem to like forcing this opinion on many people who come here for jQuery help, in a manner that doesn’t seem to fit in with how we try to help people here.
I hope that you can improve on how you help people here.

9

There are two solutions that can be used here.

The first solution is for modern web browsers which disables the highlight only on the specific area that you have in mind.


#clickMe {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

The other solution is to use scripting to disable the highlight when the above modern web browser solution isn’t effective, on IE for example.


function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}
$("#clickMe").click(function () {
    clearSelection();
    /* some script */
});

Both techniques can be used at the same time without interfering with each other.

10

Thank you, thank you! That helped, I will fully test this tomorrow and I’ll let you know the results. :slight_smile:

11

The solution works for me, thank you! :slight_smile: