How to add click/tap function to a div tag in view

Ionic Framework ionic-v3
1

I used fallowing code to when i click over centerMarker div tag it runs test function but it is not working.

scss

page-posting {
  background: rgb(229, 227, 223);
  #map {
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  #centerMarker {
    width: 30px;
    height: 49px;
    display: block;
    content: ' ';
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    margin: -44px 0 0 -15px;
    background: url('../assets/img/start.svg');
    background-size: 30px 49px; 
    pointer-events: none; 
  }

  #map .gmnoprint img {
    width: 60px;
    height: 80px;
  }

  img {
    width: 60px;
    height: 80px;
  }
  
  .container-map {
      position: absolute;
      top: 0px;
      bottom: 0px;
      width: 100%;
      height: 96%;
      z-index: 1;
    }
  }
}

HTML


<ion-content no-bounce>

  <ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager dir="rtl">

    <ion-slide>
      <div class="container-map">
        <div #map id="map"></div>
      </div>
<div id="centerMarker" (click)="test()"></div>
    </ion-slide>
  </ion-slides>
</ion-content>

posting.ts

test(){
console.log('it is work');
}
2

Hi @Parsian
<div id="centerMarker" (click)="test()"></div>
You done it right
add tappable property with div too.
<div id="centerMarker" (click)="test()" tappable></div>

test(){
console.log('it is work');
}

Did works the console?

3

Hi, @vibinflogesoft Unfortunately it is not working.
I will post complete code here.



import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams, Slides } from 'ionic-angular';
import { Http } from '@angular/http';
//import { ConnectivityServiceProvider } from '../../providers/connectivity-service/connectivity-service';
//import { Geolocation } from '@ionic-native/geolocation';

import * as Leaflet from 'leaflet';

//declare var google;

@Component({
  selector: 'page-posting',
  templateUrl: 'posting.html',
})

export class PostingPage {
  //showSkip = true;
  public LatLng: any;
  //private marker: any;
  public map: any;

  @ViewChild('slides') slides: Slides;

  constructor(public navCtrl: NavController, public navParams: NavParams,
    //  public connectivityService: ConnectivityServiceProvider,
    //    public Geolocation: Geolocation,    
    public http: Http
  ) {
  }
  Getaddress(latlng) {
    let url = 'https://nominatim.openstreetmap.org/reverse?format=json&lat=' + latlng.lat + '&lon=' + latlng.lng + '&zoom=18&addressdetails=1';
    return new Promise(resolve =>
      this.http.get(url)
        .map(res => res.json())
        .subscribe(data => {
          resolve(data.address.road);
        }));
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad PostingPage');
  }
  onSlideChangeStart(slider: Slides) {
    //this.showSkip = !slider.isEnd();
  }

  ionViewWillEnter() {
    this.slides.update();
  }
  ngOnInit(): void {
    this.drawMap();
  }
  drawMap(): void {
    let map = Leaflet.map('map');
    Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 25,
      zoomSnap: 17,
      zoomControl: true,
      tap: true
    }).addTo(map);
    map.locate({ setView: true });
    map.on('dragend',(MouseEvent) =>{
      this.Getaddress(map.getCenter()).then(data => {
        var popup = Leaflet.popup()
          .setLatLng(map.getCenter())
          .setContent('<h3>' + data + '</h3>' + '<br />' + '<p>Hello world!<br />This is a nice popup.</p>')
          .openOn(map);
      });  
    });
  }

  test(){
  console.log('it is working');
}

}

html


<ion-header no-border>
  <ion-navbar>
    <ion-buttons end *ngIf="showSkip">
      <!-- <button ion-button (click)="startApp()" color="primary">Skip</button> -->
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content no-bounce>
  <ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager dir="rtl">
    <ion-slide>
      <div class="container-map">
        <div #map id="map"></div>
      </div>
<div id="centerMarker" (click)="test();" tappable></div>
    </ion-slide>
    <ion-slide>
      <h2 class="slide-title">Ready to Go?</h2>
      <button ion-button icon-end large clear (click)="startApp()">
        Continue
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-slide>
  </ion-slides>
</ion-content>

scss


page-posting {
  background: rgb(229, 227, 223);
  #map {
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  #centerMarker {
    width: 30px;
    height: 49px;
    display: block;
    content: ' ';
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    margin: -44px 0 0 -15px;
    background: url('../assets/img/start.svg');
    background-size: 30px 49px; /* Since I used the HiDPI marker version this compensates for the 2x size */
    pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
  }

  #map .gmnoprint img {
    width: 60px;
    height: 80px;
  }

  img {
    width: 60px;
    height: 80px;
  }
  
  .container-map {
      position: absolute;
      top: 0px;
      bottom: 0px;
      width: 100%;
      height: 96%;
      z-index: 1;
    }
  
    .fa-icons{
    visibility: hidden;
      }

  .toolbar-background {
    background: transparent;
    border-color: transparent;
  }
  
  .slide-zoom {
    height: 100%;
  }

  .slide-title {
    margin-top: 2.8rem;
  }

  .slide-image {
    max-height: 50%;
    max-width: 60%;
    margin: 36px 0;
  }

  b {
    font-weight: 500;
  }

  p {
    padding: 0 40px;
    font-size: 14px;
    line-height: 1.5;
    color: #60646B;
    b {
      color: #000000;
    }
  }
}
4

@Parsian


<div id="centerMarker" (click)="test();" tappable></div>```
Remove the semicolon(;) after test function and retry
5

@vibinflogesoft nothing change. :cry::cry::cry:

6

Hi @Parsian
You are doing some thing wrong

<ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager dir="rtl">
    <ion-slide>
      <div class="container-map">
        <div #map id="map"></div>
      </div>

      <div id="centerMarker" (click)="test()" tappable>
        <h2>clickme</h2>
      </div>

    </ion-slide>
    <ion-slide>
      <h2 class="slide-title">Ready to Go?</h2>
      <button ion-button icon-end large clear (click)="startApp()">
        Continue
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-slide>
  </ion-slides>

This works for me

7

Dear @vibinflogesoft I am appriciated for your making time. But I don’t understand why is not working.

image
image.png1366×768 210 KB

8

I put the code on codepen but it is not working at all there.
https://codepen.io/anon/pen/rKXeay

9

I find the problem. some part of this code was copy pasted from old project. the problem was in line:
pointer-events: none;

thakns @vibinflogesoft.