207
Views
11
Comments
Solved
How to remove OnClick event from element
Question

Hello,

I have an input inside a Div, this Div has a OnCLick event and I want to the input not clickable.

I tried this JS without success: document.getElementById('remove-onclick').removeAttribute("onclick"); 

Anyone has idea how to do this?

Thanks 

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi @Paulo Torres ,

attach an eventlistener to the onclick of the input, that does a stoppropagation.

See example oml, this is a piece of javascript added in the onready.  (has to be in a spot where the input is part of the dom, so might be a bit more complex than this simple example)

Dorine

QDR_InputInClickableContainer.oml
2023-08-28 07-00-10
Paulo Torres
Champion

Hello @Dorine Boudry,

StopPropagation in fact it's a great idea. You are right my case is more hard because when the screen the field is hide and it means the field is not in the DOM, but but with some adaptations and code now works.

Thanks a lot for your help :)

2019-08-28 11-43-22
Bruno Marques

Hi,

One way to do this is with CSS and put the container in front of the input.

Add the following style to the container:

position: absolute;

On the input you should add the following:

position: relative;

z-index: -1;

This way the container prevents the input from being clickable.

Regards

2023-08-28 07-00-10
Paulo Torres
Champion

Hi Bruno,

Thanks for answer.

It seems not working: https://ptorres.outsystemscloud.com/AppTestes/CopyToClipboard?_ts=638031756668206395

Can you help?

2021-10-13 13-42-04
Bruno Lourenço

Hello Paulo,
I don't know if this is what you want but add it, pointer-events:none; on the CSS. For me work with the link you shared,when I click on the div the message does not appear.

Regards,

2023-08-28 07-00-10
Paulo Torres
Champion

Hello Bruno,

What I want is to have click on div but not in input text.

Anyway if there is no solution I need a workaround similar with what you told.

Thanks

2019-08-28 11-43-22
Bruno Marques

Well, I think you need to put the input box outside the onclick container otherwise it will always be clickable because the container is the parent. 

I attached an oml that does what you want but not in an elegant way. Don't know if there's a better solution.

Regards

SampleOml.oml
2023-08-28 07-00-10
Paulo Torres
Champion

Not works because you can't write in the field.

Thanks anyway

2019-08-28 11-43-22
Bruno Marques

That's because the input has the read only extended property. Remove this and you will be able to write.

2022-05-02 13-50-49
Paulo Ritto

@Paulo Torres ,
you don't want to be able to put anything in the input?


If so, you can do something like this (picking up on your example URL):


var inputEl = document.getElementById('Input_Text2');

inputEl.onfocus = function(e){ e.currentTarget.blur(); }



What this does is that the input will not be disabled but it is not clickable in the sense that if you try to focus on the input, it will always apply the blur.
Is this what you wanted to achieve?

Kind regards,

Paulo Ritto


2023-08-28 07-00-10
Paulo Torres
Champion

I want to write on the input, that's why I need to remove the link because if the user clicks will be redirect.

Thanks

2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi @Paulo Torres ,

attach an eventlistener to the onclick of the input, that does a stoppropagation.

See example oml, this is a piece of javascript added in the onready.  (has to be in a spot where the input is part of the dom, so might be a bit more complex than this simple example)

Dorine

QDR_InputInClickableContainer.oml
2023-08-28 07-00-10
Paulo Torres
Champion

Hello @Dorine Boudry,

StopPropagation in fact it's a great idea. You are right my case is more hard because when the screen the field is hide and it means the field is not in the DOM, but but with some adaptations and code now works.

Thanks a lot for your help :)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.