android中图片的点击事件,android webview图片点击事件

最近项目中用到webview图片查看功能。一开始看到网上有位大神的博客中有实现这个功能：http://www.voidcn.com/article/p-tvdfmyhz-nm.html。分析了下，大神的思路应该是这样：

1.实现webview与js交互

2.通过js查找html页面的img标签

3.给每个img添加一个onClick响应事件；

按照这个思路，在某些手机上，图片点击无效。后来又换了一个思路：

1.webview与js交互；

2.webview添加ontouchListener；

3.通过onTouch实现点击事件，获得点击的x、y坐标；

4.通过x、y坐标的位置，使用js方法获得图片地址  ，完成点击事件；

这个方法好处在于：点击事件是通过webview实现，而html只需要获取图片的地址。

主要代码如下:

package com.zyl.webimage;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.content.Context;

import android.content.Intent;

import android.os.Bundle;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnTouchListener;

import android.webkit.WebView;

import android.webkit.WebViewClient;

public class MainActivity extends Activity implements OnTouchListener{

private WebView webview;

@SuppressLint("JavascriptInterface")

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

webview = (WebView) findViewById(R.id.webview);

webview.setWebViewClient(new WebViewClient(){

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return super.shouldOverrideUrlLoading(view, url);

}

});

webview.loadUrl("http://sina.com.cn/");//登陆一个有图片的URL

webview.getSettings().setJavaScriptEnabled(true); //支持JS

webview.addJavascriptInterface(new JsInterface(this), "imageClick"); //JS交互

webview.setOnTouchListener(this);

}

class JsInterface{

Context context;

public JsInterface(Context context){

this.context = context;

}

//查看图片url

public void click(String url){

Intent intent = new Intent(context,ImgUrlActivity.class);

intent.putExtra("url", url);

startActivity(intent);

}

}

float x,y;

@Override

public boolean onTouch(View v, MotionEvent event) {

//通过wenview的touch来响应web上的图片点击事件

float density = getResources().getDisplayMetrics().density; //屏幕密度

float touchX = event.getX() / density; //必须除以屏幕密度

float touchY = event.getY() / density;

if(event.getAction() == MotionEvent.ACTION_DOWN){

x = touchX;

y = touchY;

}

if(event.getAction() == MotionEvent.ACTION_UP){

float dx = Math.abs(touchX-x);

float dy = Math.abs(touchY-y);

if(dx<10.0/density&&dy<10.0/density){

clickImage(touchX,touchY);

}

}

return false;

}

private void clickImage(float touchX, float touchY) {

//通过触控的位置来获取图片URL

String js = "javascript:(function(){" +

"var obj=document.elementFromPoint("+touchX+","+touchY+");"

+"if(obj.src!=null){"+ " window.imageClick.click(obj.src);}" +

"})()";

webview.loadUrl(js);

}

}